Asana Website Clone + Contact Form : Next.js 14, React, Tailwind, Framer Motion

hey what's going on guys welcome back to another video uh and in today's video I'm going to be going ahead and recreating the as website from start to finish using nextjs T1 CSS framer motion node mailer and so many other Technologies uh and I kind of want to show you what I built so I put a link in the description down below if you want to go check it out for yourself as well as the source code but yeah let's go ahead and quickly go through a demo we got a logo KSL here we got links to different pages more information Pages down below footer social icons all that stuff this going to be our product page product page is going to include more information about our product we're going to have an accordion here with more information kind of rendering as we click and then we're also going to include again more buttons more logos more images more text uh so on and so forth so yeah go ahead and you know take inspiration from it go ahead and use it outline it like go ahead and really just kind of make it your own uh this is going to the pricing page the pricing page is going to include more information about our pricing and then it's going to go ahead and render different values depending on which one is active so yeah that's that one and then we're also going to have a fully functional contact form so the contact form is pretty much going to uh capture the values and then send it to you so you can go ahead and you can implement this into your own website uh as well as kind of really any other project you're working on so I'm going to go ahead I'm going to say I got 200 plus employees I'm just going to say hey hey uh you can put anything else you like but yeah I'm going to go ahead and click submit and then I get prompted with this message and and then I'm going to go ahead and show you uh in my Google account what the actual uh values are here so contact form submission this is who it came from this is the email if I want to go ahead and contact that user uh as well as the phone number um country all that kind of sort of information so yeah let's go ahead and actually one other thing I want to show you is that as always all the websites are going to be mobile responsive so I'm going to go ahead and maybe I'll put this in the middle here you can go ahead and you can see it for yourself uh test it out on your mobile phone uh yeah we're going to have a side menu we're going to have a pricing page scroll like that and then I'm also going to include a our contact page as well so yeah uh we going to go ahead and kind of build this thing out for the next couple hours uh and join along okay so let's get this project started so the first thing that we're going to want to go ahead and do is head to this website called Chad ci.com uh this is going to be our tail and CSS as well as uh component Library package kind of manager so let's go ahead and go to documentation installation nextjs and then this command line right here is what we're going to put into our vs code terminal so I'm going to open up my vs code here and I'm going to click terminal at the top and I'm going to click new terminal so this right here I'm going to go ahead and move this to the side as well as this one to the other side so that we can better see all righty so I need to copy this command line one thing that I want to change right right here uh is when it's configuring or initializing this app it says right here my app I want to go ahead and I want to change that to be something a bit different so I'm going to copy the rest the the command for change app so I'm going to npx create next app at latest and then here I want to call it something different so I'm going to call it sauna uh website works for me and I'm going to say typescript Tailwind and then I'm going to say es lint and then once I do that I want to click enter and then it's going to go ahead and configure all the packages for me so click yes just or enter do we would you like to use a source directory I want to say no it is preconfigured and all I'm doing here is I'm just clicking enter enter enter and now I have my package kind of or I have my project set up so let's go ahead and let's just give it a second for this to load okay so looks like we're just about finished oh and we are done so next thing I want to do is I want to go into this project and then I want to run this command line so I'm going to click or I'm going to type in CD and then I'm going to say a sauna website now I inside of my ass website directory and then I'm going to run this command line so I'm going to say npx Shad CI I latest in it so I'm just going to click down on drop Dem if you didn't see that click npm and then I'm going to paste so control V for me uh and then yeah paste the command line in there and now I'm going to have get prompted with a number of messages so let's see what it says so it's going to say would you like to use typescript yes of course so I'm going to click yes I'm going to use the default styling going to use slate as well I want a global CSS yes yes enter enter enter enter and then I'm actually not able to see this too well but this one this question here is always just going to you're pretty much just going to click enter through all of these enter and then yeah so perfect so now I'm able to actually go into this project so let's close this terminal here and let's open it up so let's go to open and then let's go ahead and find it so we've called it a son a website and perfect so you if you get to this stage right here and you have all of this configured that means you've done everything correctly if not go ahead and just rewatch the video uh but yeah you should have all of these files and folders in your project so perfect page awesome so let's go ahead and let's continue so we can now we can go ahead and we can actually close the Shad cnii documentation for now uh because we're just not going to need it so I'm going to full screen my code editor and I'm going to actually run this on my terminal so again at the very top here I'm going to click new terminal and then I'm going to say npm run D fantastic so let's go ahead and let's open this up on Local Host 3000 so I'm going to click controls or actually I have to open up yeah another browser so then I'm going to click or I'm going to type in Local Host 3,000 and now I'm going to see the default pages that Shad cnii as well as nextjs have preconfigured so this is all all the styling was done by them and the next thing I want to do is actually want to go ahead and I want to make this 5050 so that we can kind of see what's going on so I'm going to close this make this much smaller and then you guys can kind of see at the same time all righty so the next thing I want to do is I actually want to go ahead and I just want to delete all of this because I don't want this to be uh we're not going to use any of this so I'm just going to go all the way to my main so if you didn't see that I'm just taking my main tag right here and I'm going all the way down to my next main I'm just going to say div I'm just going to say high so now I'm being prompted with my high which is fantastic so let's go ahead and let's go to the other kind of components of our folder so let's go to uh our layout. TSX and then what I want to do initially is I want to change the font um I think the font for example for the the website that we're modeling uh closely resembles uh this one that we have right here so I'm going to go to so instead of enter I want to use something called outfit so just here where it says enter we can just change this to outfit and then we can go instead of saying const enter we should say const font and then enter here should just be changed to outfit uh the one that we have right here perfect so the next thing I want to do is I want to change this class instead of enter. class name to be font. class name uh and you won't be able to see the difference really or if you do it is negligible right now but uh as we continue building out you'll see that this plont that I've used is actually pretty good for what we're looking to replicate um the next thing you can do if you want is you can go ahead you can change this so this information is what will appear at the top of your browser right here uh where it says create next app we can go ahead we can change it to uh sauna for example and then give it a second to load and then it's going to render here sauna so yeah just a little additional feature if you want to go ahead and add in but yeah it's not too important so the next thing I want to do is I want to go ahead and I want to actually start building this thing out check out our global. CSS Okay cool so we have everything set up right now now let's go back into shad cnii and let's actually install some of the components that we're going to need to make this thing possible so back into my Shad CI let's go to our components and then we're going to go ahead and I'm actually just going to um give me one sec I'm going to go ahead and I'm just going to download them all at once so that we don't have to continuously keep coming back uh or if we do we can always do that but I want to just show you kind of how this works and then how you can actually just kind of you can really just get your projects out faster using sh Shad CN UI so so give me one sec so we're obviously going to need a button to start so let's go ahead into our actually we're going to need an according it's the first one so let's go ahead and do that so npx Shad CNU at latest again I'm using npm you can use whatever you'd like uh and I'm going to go into my terminal I'm just going to run this command so you guys can see cool so I'm going to do this and I'm going to get my accordion in as well as it's going to just install right away cool so it says done and now how this works is it's going to display here in my accordion folder so this code right here is all written by shat CI uh and it's completely free to use and we can go ahead and you can use it or we can install it and we're going to go ahead and change this actually a bit later on the project but for the most part A lot of the code here is really written perfectly uh and it's going to be it's going to be really helpful for us going forward so we're going to add the accordion and then the next thing I want to do is I want to add a button so I want to go into the same thing where it says this installation where it says CLI I'm going to go ahead and click npm and then I'm going to again make it so that you guys can see cool so I'm going to say add button and now you're going to see in my folder I'm going to have an accordion and now a button again all written by Shad CI uh completely at our disposal so yeah let's go ahead and let's actually just continue um adding these in because we're going to need a number of them later so let's go into our we're going to need an input for sure when we're building our form but yeah let's go ahead same run the command again I'll make this smaller so you guys can see it I'm going to be adding in my button now and yeah I mean for right now I think that works we'll continuously add them as we go but I just really want to show you how it works so the next thing I want to do is I want to go to my page. TSX and I actually just want to show you uh how the button works so if I do button it's going to kind of give me an autofill here so I'm importing my button from at/ component SL ui/ button so make sure you have that or else it won't be visible for you to see but here is my button now it doesn't do anything but the styling and kind of properties have all been written by Shad CI and we're going to go ahead and we're going to change it to be a bit different a bit later but yeah make sure you've gotten up until this point because if you haven't it's going to be really difficult to follow along so just make sure you have at/ components UI or slui button Okay cool so we can go ahead and we can actually add in a number of other features uh so let's start off by building out our nav bar because we're going to need a nav bar of course so yeah so let's start by building out this part right here okay so the next thing I want to do is actually going back into Shad CI again uh we're going to go ahead and we're going to add a navigation menu so this right here is again all written by shui and it's free to use so let's use it so let's go back into our terminal and let's add our navigation menu cool so now we've got our uh Na navigation menu we can go ahead and we can apply it to this so let's let's let's change up the folder structure a bit actually right now because I think we should make it as concise as possible um and we can start by doing that by immediately removing actually yeah let's remove this page. TSX so we can go and delete this page. TSX because we want to use a more modern approach to naming conventions and your project is going to immediately crash had you had been running it which is completely fine so don't worry about that and let's go ahead and create a new folder called bracket landing page Okay cool so you're probably wondering what is this right and it's a fair question because this is not typically something that I mean it is a much more modern approach and it's not really seen as much as or as common but this is pretty much going to say that this is going to be the root folder of our project and then once I go ahead and I say page. tsf X and then I run this command called FS sfc which is a stateless function component I'm going to go ahead I'm going to call this landing page div and then I'm going to say hi so uh quickly and then boom you're going to see it so we're right back to where we were all we did is we re kind of structured our files to indicate that each folder is going to be its own page so going forward we're we're now going to be using a naming convention where at in our app if I want to go ahead and I want to create a new like page I'm just going to go ahead into my using like the app like nextjs router it's going to create a a new page based on like this file like naming convention so if I go ahead and I click page. TSX you're going to see that if I go to slash contact now or I shouldn't have done that but if I go into my local host and I now I do contact you're going to see that there is no component called uh in this page so let's go ahead and let's do that again so sfc and let's just call this contact page and then let's do dtive and let's just say hi this is a contact page and perfect you're going to see the text right here so the reason behind this is it's going to be a lot more efficient going forward to have each of our Pages have their own specific content of course we're going to have like Global variables and components like like as you've seen here but at the end of the day I want like my pages to all be different from one another because we're going to have a Navar but the nav bar is going to change or it's going to have different properties depending on what page we're on and so that's really why I kind of want to emphasize uh like folder structure importance and kind of like really get it out the way now as well as going forward it's going to make a lot more sense just using um kind of the projects so let's go ahead I hope that made a lot of sense if not um like I can maybe do a better video on it going forward but I think it kind of really emphasizes the point of having each page be its own folder I think that's kind of really to summarize what I was trying to say there so in our landing page we can go ahead and we can create some components so let's go to let's go into our landing page and let's create a new folder and let's call it our nav bar then in our nav bar I want to go ahead and I want to create a page. TSX then in my P in my Navar I want to go ahead and I want to create a components folder so I'm going to use underscore components and then I'm going to say new file and then I'm going to say buttons. TSX and then I'm going to also create another file called logo. TSX as well as a third file which is going to be called menu. TSX cool so let's go ahead and let's continue building this out so into our page. SX yes so our page or our navbar is going to really just be a combination of the Shad c nuui as well as some custom properties so give me one second to pull that up but yeah essentially we are going to go ahead and let's actually start with the logo because it I mean why not it's the easiest right so let's do our logo and then let's do sfc which is a stateless Serv function so we're going to go ahead and we can say const logo and then we can say div and then we can say uh hi for now and let's quickly rewind to these like the hot keys that I'm using so I'm going to go ahead and show you how I got those installed so you're going to go ahead and you're going to go to es7 react Redux uh react Snippets so go ahead and install this it's going to pretty much give you out uh give out like a list of different functions that you can just type and then a function will kind of be built upon that so this is the entire list right here that you can go ahead and you can use uh but yeah it would be a huge help for you going forward just to have these hot keys because uh to tax is just faster and it's just easier to get out the way so yeah make sure you have that installed because we're going to be using that throughout the rest of the project um I'm going to go back I'm going to open up my vs code give me a sec here and I'm going to go into U website Okay cool so I just had it move it but but yeah so let's go ahead and let's go to so we should yeah let's let's do a breakdown of how this website looks so on our left hand side here we have our logo and then we have our menu here and as well as like different buttons that we can click so that's how we should kind of model or kind of think about building this website and that's the reason why I went ahead and I kept it so that each of these components have their own file so let's go to our const and we can actually remove this and we can just change this to a link and then our link is going to be imported from next link so make sure you have that and then we're going to close this link here and then the next thing we want want to do is we want to indicate where this link is going so this is a must have property uh built in naturally so our link whenever we click on our logo it's going to I'm going to go back to our project so we can see it and I'm also going to click off the contact page so I'm just going to go back to where it says hi but essentially the way I want this to work is whenever somebody clicks on our logo I want to just redirect to the the main page right I think that makes a lot of sense so let's go ahead and let's do our image so we're going to be using the next image as well so to SRC we can say alt [Music] equals uh you don't have to put brackets around it if you don't want to I personally don't like it so I'm going to remove it but yeah so let's go ahead and let's we need to have a width so a width of let's just say 80 we don't want it to be too big and then for a height let's also put 80 and then the class name of also uh margin right of six okay cool cool so that's our class name and then we're going we have to close this image so okay so this is our logo uh it encapsulates everything that we're going to be needing in this file uh except for right here where it says Source uh we don't actually have a logo because I will I'll do a better example right now of how we actually add logos to our project so I'm going to go into my page. TSX so inside so just make sure that you are inside app brackets landing page page. TSX and go ahead and import your actual uh logo so I'm going to go ahead I'm going to call this function I'm going to call logo and then I'm going to say logo so you're going to see that we're going to get prompted with this image because it doesn't exist right we don't actually have anywhere in our folder structure where we have configured a logo so I'm going to go ahead and I'm going to show you how you can go and you can add uh like images and stuff like that so let's go down to our public and let's go ahead and create a new folder called images and then the next thing that I want to do is I actually just want to go ahead and import our logo so I'm going to go ahead and create another folder called logo just to better differentiate and then from there I can go ahead and I'm going to actually just import a uh oh so make sure that when I'm can delete this actually uh our images are in a new folder called Lo logo so yeah I wasn't sure if I had that before or not but the next thing I'm going to do is I'm just going to actually copy and paste a number of logos into my project from the existing code so if you want to go ahead and check out the GitHub I'll have all the logos there as well but yeah essentially just to speed up some time uh I went ahead and I just had them pre-existing if not if you don't want to do that that's fine I'm going to go ahead and show you how I got these logos so I'm going to go to this website called logo.com This is a completely free website for people to use use grab inspiration from so all all I did really is I just downloaded one of these and then I just imported into my project and so you're we're going to go ahead and we're actually going to be using pretty much all of these so feel free to to Really download all of them as you see fit because we have a lot of logos uh in our project so yeah um that that's pretty much it so head to this website if I'll put a link in the description down below for you to grab it and it's pretty much just logo.com but yeah just to save us time uh I'm going to go ahead and I'm going to actually just import the logos um so I'm going to delete this and then I'm just going to import here images logo and then you're going to have the SVG for every single uh file which is perfect now let's go ahead and let's continue so let's go back into our navbar into our logo and let's actually point to a a logo in our now now that is in our file so we can say um images we're going to need slash so slash Images slash logo slash we can call logo one and then it's not PNG it's SVG and now let's go back into our project so let's go back to AA and perfect so you now see that we have a logo here so if not make sure you pause the video uh and kind of really uh try to get this part done because we're going to be using a lot of the same kind of methods going forward um but yeah all I did there was I created a folder called images I created a folder called logo and I just imported all of the logos that I downloaded from this website here okay perfect so we now have our logo uh and it is actually kind of big uh I have my own personal custom logo for um this website or this channel so I'm going to go ahead and use that if you don't have one that's fine just use any of the ones that I provided in our kind of repository here but I'm going to go ahead and I'm going to add a logo uh just give me one one quick second here cool so this one's called and this is going to be my logo I'm going to use and I'm going to go ahead and I'm going to go back into my logo and instead of logo one I want to call it uh I think it's called yeah bird [Music] logo.png and now I have my own very very own logo here uh for the channel so perfect yeah so use any logo that you want try to get it to the be similar size uh as it's going to be important going forward but yeah any logo will work so yeah let's go ahead and let's continue the next thing I want to do is I want to go ahead and I want to build out our menu right because we're going to have a number of different like options of course going through here let me go ahead and I want to kind of show you how uh these all work so let's go ahead and let's go back to our website and let's add in our uh logos so let's go to or not our logos I should say sorry our menu so the next thing I want to do is I want to go to uh shats sorry and I just want to copy and paste all of this code right here so this code right here is pre like given to us essentially uh and actually we can take a step further we can go here instead so head to Shad xui head to the navigation menu and go ahead and copy and paste all of this code right here it's going to save us so much time in the future uh and yeah it's it's already there for us right so why not just use it so immediately you're going to be prompted with some errors but that's okay because it's fine all this one is indicating is that we don't have icons which is fine so that's no big deal so we're going to go ahead and we're just going to remove the icons and then it's also going to tell us where the icons are located so head down to line 70 where it says icons. logo and we can go ahead we can just remove that now the next thing I want to do is I I want to see this I want to visualize what's going on so I'm going to go back into my navbar page. TSX and I want to call this uh call this uh file so I want this is where I want my my logo and everything else to be displayed so I want to go ahead I'm going to say sfc I'm going to call this one navbar and then I'm going to say div and then I'm going to say logo from component from Dot _ components SL logo that's correct and then I want to go ahead and I want to import our navigation menu so our nav navigation menu uh let's go back to our menu it is being export defaulted as a um navigation menu demo which is fine uh but I don't really want to call it a demo because it's it's not a demo it's a menu bar so let's call it menu bar and then let's go ahead and let's import this function so back to our page. TSX we can go ahead and we can import that so let's go slash navigation menu and then bar so from the same level of the folder you're going to see a navigation menu bar let's go ahead and let's run our project just to make sure that we have everything working correctly so npm rev and then let's see so this is happens all the time with nextjs is your um I guess you could say your server will just kind of like crash but that's completely fine because uh it's totally natural so let's just see what we got now okay cool yeah so I actually know what this issue is so the reason why we're not actually seeing this is this Navar is not actually being called anywhere we have a page. TSX page which is fine but we don't actually like we're not using our nav bar anywhere so what I want to do is I want to take the logic behind this like landing page and I want to change it to be a nav bar so inside our nav bar I want to go ahead and I want to call like our navigation menu and then I want to call the nav bar to the page. TSX so in our landing page it doesn't we we shouldn't render every single component to each page we should have sort of like a a main page and then underneath we should have like umbrellas so if we go ahead and we I can kind of to better conceptualize this I'm going to go ahead and I'm going to import my Navar I don't want my logo either but perfect so you see now that we have our logo and we have our uh nav bar and the reason behind that is once we go into our nav bar we see that we have our logos and we're importing our our menu bar so that's I think that's the that's like the right way to go about it is because again like I said like you don't want to overload certain pages with with components you want to keep it as like organized as possible but yeah let's go ahead and let's style this now because I don't want I want this to go across so I want to say div I want to say cloud last name and I want to say flex and then I want to say I want the width to be two over three and then I want to say on medium size screens I want the width to be uh half so perfect so you're able to see oh sorry you're able to see now uh that this is how it works which is fine so the next part of this is we're going to go ahead and uh let's go ahead and let's actually we can go ahead and continue styling this so let's create a div at the top here and let's go ahead and close the div and let's go ahead and let's go ahead and what I'm sorry what I meant to say is let's go ahead and let's create the other the remaining buttons because we have a login get started and so on and so forth buttons to build so let's go ahead and do that the next thing I want to do is I want to go into my buttons and I want to create uh this component so this button is going to include a number of different features uh but it's going to be important for us uh to have the ability to um you know open on a mobile and so on and so forth so let's do sfc sfc let's call it action buttons right because there's going to be actions related to whenever we click on these buttons uh and then let's do our dip right there so if we just say Hi and then not in our page. TSX but in our navbar uh we can actually go ahead and we just rename this because why not it's getting a little confusing so let's just do navb bar. TSX it's going to say update the Imports let's just say yes and then yeah so in our Navar let's go ahead and let's import our action butts so action butts from the same level so our action buttons are right here and then we have our high so let's click into action buttons and then let's go ahead and start building this thing out the next thing to build this thing out the next thing we're going to need is we're going to need our shat cnii so we're going to need a sheet component so whenever we click on it or something we want this effect to happen so let's go ahead and add the sheet let's go down to our terminal I'm going to make this a bit bigger so you guys can see and I'm going to say npx Shad seni at latest at sheet cool so this is going to go ahead and install the sheet and then we can go ahead and start building from there so let's go and we can actually go ahead and while we're on this page we can go ahead and we just import all of these like from our sheet provider so sorry about that but here in our sheet we have a number of different classes uh that we can call and then we're going to go ahead and or props I should say and we're going to go ahead and add it to our na bar so make sure you're back in your action buttons go to the very top you can enter enter enter a bunch of times and then we can go ahead we can say this right here so it's going to be gr out because we're not using it which is fine next thing I want to do is I want to import buttons because we're going to have some these are obviously going to be buttons so I'm going to say import button from @ SL components at UI button that's perfect right there and then the next thing I want to do is I want to go ahead and I want to start using uh some icons here so I want to go ahead and I want to install a package called mpmi react icons this is going to be important for us going forward because these are going to be this is going to be the icon package uh that we're going to be using so I want to go ahead and I want to just import some icons right away uh so that we can use them so I going to say import and I want to say align justify from Lucid react and if you're wondering how I'm getting these autofills the reason behind that is I'm using something called GitHub co-pilot uh it is an extension that you can go ahead and install as a programmer that is going to make your life so much easier and I cannot like recommend this more than possibly enough so make it's like I think I believe it's like $10 a month now maybe 15 but make sure you have this because it's just going to speed up development so many times it's it's unbelievable um I also want to go ahead and I want to include more um so I like justify and I also want to include Globe as well the next thing I want to do is I want to import a link from next link perfect so let's go ahead and let's actually start using this now so we can go ahead and same as the what we did for the Navar we can go ahead we can just copy the sheet here so let's go ahead into our buttons and let's say sheet so all I did there is I just copied and pasted all of this code that was right here so underneath the usage and the second kind of I went ahead and I just copied it and then I paste it so let's go ahead and view what's going on and then we can go and we can continue so site has not been reach okay that's fine I was not running the project let's give it a second to load here cool so it's saying open so when I click open we have that action which is perfect because on our actual website when we are on um go ahead I'm going to pull it open just so that we can see it so yeah so pretty much what we're doing is we're recreating this this feature right here where when we click on it uh it opens so let's continue from there um I'm going to go back to this cool uh let's go back to our buttons all right awesome so I have everything there that I need uh and let's start styling those things so the first thing I want to do is instead of open I want to just use the Align justify u i don't open doesn't really make any sense right we want to use something like this that's fine the next thing I want to do is I want to go ahead into our sheet header and then I want to change the description or we don't actually need a title right the title refers to this component right here uh we don't need that so we can go ahead we can just completely delete the title from there and then in the sheet description I want to go ahead and I want to apply some styling so underneath we can go ahead and just delete this text for now we're going to say div we going do class name and say Flex flexx call space y4 items start uh with full text LG and then text black uh it does it by default but if you want to have it be a certain color uh you can go ahead and you can change it so I want the margin top to be 10 as well and then I want to start adding in some links so I want to say link href and then I want to say uh I don't want to pass HF necessarily I want to just do uh I guess we could we could just pass HF it's fine and then I want to close the link so what I want what I'm creating here is our uh pages so for I should say our options in our menu on the side so now what's going to happen is when I click this I'm going to have a sign in option and I'm going to go ahead I'm just going to copy and paste this like four other times so that we have um three four so we just have a number and then we can just change the text on each of them so we have a sign in believe we had like a get started and then we also had a contact page or a pricing page I should say and this will just refer to any of the you know pages that you go ahead and make in your own project uh features and then let's go ahead and let's do a contact as well and then let's do one more and let's call it maybe maybe we call it like a belt yeah let's do a belt let's see what we had here okay yeah we had a Bel or what did we have um we had okay yeah so we have it about so we have all the options here that we configured uh and then later we're going to go ahead and we're going to actually Point uh to specific Pages we could actually go ahead and do it now just so that you could see um I'm going to go ahead and I'm going to inside of my contact page or link I should say I want to just immediately go to my contact so I have this open I click contact remember how we made a contact page in the very beginning uh uh with this without the brackets because now this is referring to the content that we have so we have this function inside of this page inside of the folder called Contact and now we're pointing to that folder so yeah so that just kind of like an intro to what we're going to be doing later or how we're going to be having everything kind of set up so yeah that's that's really it let's go back to our sheet or our buttons not here um go into our landing page into our nav bar into our components into our buttons and then now we have that so and we want to go ahead and we want to apply some more styling because we want it to have essentially we want more options to be displayed I'm going to go so here you can kind of better see it here we have more a number of like we have this globe and we also have this contact sales page that are not originally visible or we make the menu disappear as well as these buttons uh so let's go ahead and let's add that styling in um we will also be we we'll work on styling in a bit just give me a sec so buttons oh I did not mean to do that give me one sec I'm opening this up here let's go to sorry about that and I want to add this here cool so underneath our div where we have our sheet here I want to go ahead I want to open up a new div essentially so I want to say div and I want to say class name and I want to say hidden uh actually we're getting an a I know what this air is we'll just quickly resolve it essentially you can't have a div underneath the main div so we have to go ahead and we have to just add a div to the top so let's add a div and then let's take that div and then let's go all the way to the bottom and close it right here uh the next thing I want to do is I want to just add some styling so let's do div class name and I'm going to say on a medium size screen it will be hidden right because we're not going to have it wouldn't make sense to have a sheet Navigator um on a side like we only want this to appear on mobile so all I did is I just I just made it hidden cool so let's continue so underneath here now we can go ahead and we can add in some more divs so let's say div let's do div class name we'll say it's originally supposed to be hidden on a small screen but then when we get to a bigger screen we want it to appear so then I want to say space X4 and then I want to say oh inside of here I also want to say items Center the next thing I want to do is I want to add another div and I want to say class name I'm going to say border R border to be black and then I also want to say div I want to say class name I want to add a margin right a four and and then underneath I want to say globe and then I want to apply some styling to that this globe right here was what we imported origin at the top from Lucid react so let's do Globe we're going to say a height of six a width of six and then we're going to say text Gray 700 and then I'm going to say let's see what that looks like Okay cool so we have what we need and let's just continue so underneath this div right here where it says margin right four I want to go ahead and I want to U you know start applying some links so we can go ahead uh and say actually outside of this border I should say we make sure you are or when whenever you click on a div it will hover so make sure outside that div you go ahead and add a link so I'm going to say a link and I'm going to say hre and I'm going to refer to uh this so I'm going to contact sales and I'm going to say oh should not happened there link and then inside my contact sales again I'm just going to point to the file or the folder or the page I should say called Contact cool and then the next thing I want to do is underneath this one I want to say button again this button the reason the reason behind why it's green is because it's being imported from shats nuui uh like this whole this file here so make sure you have uppercase B uh and then we'll do a class name text MD and then also going to apply a variant so variant and then I want to say ghost because I don't want it to have um any background color so ghost and then from there I want to click close the button and then I'm going to add some text I'm going to say sign in and then I can go ahead and I can just copy the paste the button right here so I can just do this and I can just change this to I think maybe get started yeah get started to work the next thing I want to do is I want to change the class name to BG uh yeah I could just change it to BG black and then it will work and then the next thing I want to do is I want to change I don't want to have a variant here I just want to have text oh and make sure we're still inside the class name here we do text MD rounded SM cool so that's what it looks like we have our button we have our sign in and now let's make it level with the rest of the Navar component right so let's go ahead and let's do that um the way we're going to do that we going to go back into our na bar and this file right here and we are going to apply some styling so outside of our return here we can go ahead and we can say const nav bar classes equals this is the back tick right here this is not a a regular quotation mark this is the one that is found like for me it's above my tab um tab button like on my Mac but I'm not sure where it is for you but make sure you're not using your regular quotation work you're using a tab so then I want to say Flex I want to do say items Center I want to say justify Center I want to say space X1 I want to say BG and we're going to go ahead and use a custom color code here so make sure you have BG Das bracket number sign capital E 5 e 4 E2 and we're going to go ahead and close that I'm going to say on a medium screen I want the padding on the x-axis to be 10 so medium PX 10 I want to say sticky so I want this to be I want the navbar to follow along as user scroll so top zero Z -50 and then I want to go ahead and I want to introduce uh we can introduce that St later but I'll show you for right now this works perfectly so if you have this uh that's perfect so next thing I want to do is actually want to import the navbar classes into our class so I want to say navbar class name and it's not going to be a quotation work it's going to refer to this function right here and voila perfect so this works uh I know it's not perfect right now but going forward we're going to go ahead and make it some differences uh to make this appear a little bit better but you should now have a Navar the that when you hover over like the getting started and the components uh options that you have some more stuff as well as you have the contact sales and then let's just compare little side by side comparison for right now uh let's see so yeah have you have that and then going forward we have that so that looks pretty good to me for right now uh but yeah let's go ahead and let's continue building from then um I might have actually just accidentally close my my thing that's fine I'll just open it back up okay cool so the next thing I want to do is I want to go ahead and I want to get rid of this um I don't like how these are white so we can go ahead and we can do that in our menu so let's go to our menus and then let's let's change that I'll show you how to change that color right there so in our navigation menu we have to click into our navigation menu and then we have to go to where it says where our our getting started is indicated let's go ahead and not the trigger but the menu item it's going to open up a little menu for us and then we can go ahead and we can simply say that we do not want to have a background color so uh I'll click into navigation menu if it will let me it won't let me okay that's fine so let's just click into navigation menu okay now it has so all we have to do here is where it says group inline Flex h10 this one right here so line 43 or 44 I should say where it says BG background let's just go ahead and let's just remove that and now you're going to see that the it went away it's only apparent when we are hovering over which is fine I personally like that effect if you want to go ahead and you can remove that uh I mean it'll be in the same I mean I have it here so it's fine we should just keep it but you can go ahead and you can find where wherever the hover is so BG axon maybe try removing that and then we'll go ahead and remove that but for our project we just wanted to have uh we don't want we don't want to be seen unless it's being hovered over which is fine the next thing I want to do is I want to go ahead and I want to make this text a bit bigger because to me it just seems a little too small so I wanted to make this pop a little bit so let's go back into our thing uh where it says uh let's go back to where our buttons is let's go to where we have our um give me a second our button menu here where it says menu trigger so we can go ahe and we can click on that so all I'm doing here is I'm clicking command and then I'm just clicking on it and then once it pops up this menu I'm clicking on navigation menu and it's redirect me directly to so the next thing I want to do is I want to go ahead and I want to find the font size so it looks like same line uh 44 we can go ahead where it says text SM I want to go ahead I want to make it uh MD so let's go ahead MD and let's see what that looks like so perfect so that it just made it a little bit bigger uh you can go ahead you can change it to LG if you want um it it really is up to you LG X those are all good to go but yeah that would be LG but I like I like the medium so I'm going to keep it at medium and then yeah perfect so I have my medium and now I have everything that makes sense to me cool so that is the Navar component we've just gone ahead and completed it it's going to be super useful for us going forward um I mean there's some text and stuff that we have to change but for right now that is going to be a reusable component that we can go ahead we can add into to a number of other Pages going forward so good job if you got to this point so far uh if not just feel free to take your time go slower it's fine uh this code again is all posted on GitHub for free so you can go ahead and you can use it whenever you'd like Okay cool so yeah let's go ahead let's continue building out the sidebar or the nowar I should say and we're going to go ahead and apply some property so as of right now um the it is not mobile responsive as you can see it kind of looks like crammed so let's go ahead into our menu. TSX and then where it says a navigation menu list so line 59 for me let's go ahead and let's say hidden because we want to be hidden on a small but then if it's a medium size screen let's say MD flex and then we can go ahead and say MD oh sorry MD space X4 so you're going to see now once I refresh this that the menu is going to go away uh and that's perfect and then we're also going to have our side bar or our side menu I should say so yeah that's perfect uh and then one other thing I want to add to the navigation menu uh is a little class name a little change so want to go back to the Navar and I want to add something to this uh navbar component so make sure you're back in navb bar. TSX uh which is an app bracket landing page uh navbar folder and then navb bar. TSX so what I want to do is I want to go ahead and I want to apply a styling that you really won't be able to see right now uh actually unless we go ahead and build out another section but essentially what I want to happen is when I want when someone Scrolls you'll see it I want a little hover effect to come into play so you see how it goes away but then as soon as you scroll more than one pixel it becomes apparent so I'm going to go ahead I'm going to add that now so that we can kind of see what it will look like so that's okay so inside of our Navar I want to go ahead and I want to create a state so I want to say const I want to say has scrolled comma and then I want to say set has scrolled but I don't want to use react. usate I just want to use UST state so when we're using use State we have to import it so we have to say import we're going to say we can just do react and then we can also say use effect as well as use State cool so we have that there and now we can go ahead and we can say once we and when we're using next 13 uh it's going to say you're importing a component that uses a UST state so that means it must have a use client so at the very top of our function or our folder or file I should say going to go ahead and want to say use client like this and now you're going to see it's the air is going to go away okay cool so now that we want to do that we want to create a use effect so we want to say use effect we want to say that and we want to say const we want to handle the scroll so we want to say scroll we want to make it equal and then we want to say if the window do scroll Y is greater than zero I want to say the set has scrolled to True which is correct and then I want to say else has scrolled set to false and then I want to close this function like that cool and the next thing I want to do is I want to say window.event listener or add event listener sorry scroll and then I want to pass in the handle scroll function and then I want it to return a remove event listener and then that from there is going to go ahead and you know uh that's going to be our us effect so that right there is that and now I want to go ahead and I want to go back into this property here where it says Z50 I want to say I want to pass in the has scrolled so we do that by passing in a dollar sign ahead so say that and we say has scrolled and then I want to also add in a question mark so question mark uh I'm going to say shadow SM so if the person has scrolled like is equal to true I want to say shadow SM and then if not I want to say shadow you can say shadow none or you could just you could just leave it to that it's fine so again we won't be able to see it now because we don't have anything else to scroll but you'll see it later on um that this is going to have a little effect which is nice Okay cool so I think with being with that being said I think that kind of concludes our Navar uh we're going to go ahead and of course add things as you know stuff changes but for right now that's everything okay so that takes us to uh building out our like hero section now of our component which is going to be this right here um and we going to show you how to build that now so back in our uh landing page so app and then into our folder where it says landing page I want to go ahead I want to create a folder and I want to call it first section you can name this whatever you like I like to keep mine as like uh simple as possible just so that I have an idea of what each thing is referring to so in there I want to go ahead and I want to say SSC I want to say first section Okay cool so immediately at very top of this function I want to go ahead I want to say import react from react I want to import import a link because we're going to be redirecting here import link from next link import the image from next image as well and then we can go ahead and uh yeah we can leave that for right now so let's go ahead and instead of a div let's call this a section to be as concise as possible section and then inside of our section I want to go ahead and I want to apply the same background I had in my nav bar so I want this kind of fun um styling so I want to say class name I want to give it a padding y of 20 uh if it's a medium screen if not I just want to do 10 I want to say I want to space everything out by 10 and then I want to say BG uh and then I want to go ahead we can go ahead and just copy and paste what we had uh for our hex code so uh wherever our it's right here yeah so we can go ahead and we can take this go back into our first section and then we can just say that okay cool so that and concludes that and now let's go ahead and let's add some more styling so here we're going to have a div and then in this div we're going to have a class name call the container we're going to say MX Auto and then we're going to say text Center as well as on a medium screen uh or like a desktop you should think of it as I want to go ahead I want to apply uh some styling so I really want this to take up one half of the screen so half and then it's going to centralize it okay cool and now I'm going to go ahead and I'm going to say div I'm going to say say class name say text 6xl going to say Flex justify Center I'm going to do on again on a medium screen I want to say um uh actually we could just leave that there and we can say MD PX 20 if not P padding bottom just 10 and then I want to say the best platform for cross functional or I think that really illustrates everything that we need to say uh and let's go ahead and let's actually to conceptualize this a bit better let's go ahead and let's actually import this function so again so into our app like brackets landing page do uh page. TSX I want to go ahead and I want to import this so I want to say import first section and it's going to be imported like this so we're going to remove the logo because we don't need it we have our first section from do/ first section top page okay cool and we have our text right away in the middle which is perfect uh and let's go back we can go ahead and just click back into it as well so underneath this one I want to go ahead and I want to say um I want to say I want to put like a P tag so this is like to indicate that this is um this text that is going to go underneath class name text LG I want to say MD uh if it's a medium screen I want the text to be a bit bigger I see margin bottom just 10 and then I want to close that there and then I say we go ahead with we just copy and paste whatever we have here just to speed things up a bit so we can just say this Okay cool so let's see what that looks like should look the exact same and it does that's perfect uh the next thing I want to do is I want to go ahead and start adding in the the get started buttons the buttons underneath right here so we go ahead and we can do that um so we can say underneath this P tag uh I should say we should go div class name Flex I want them to be uh like on the x axis like side by side I want to have a space between them justify Center and then I want to have a button tag so we're not using Shad cnii here because this button uh actually does not do anything as of right now but we can make it go ahead and do something later on but for right now we just keep we just use this standard um react button tag so we can say BG black can make the text white and then we can say p PX 6 on the x axis and then I want a p p py3 uh rounded as s and then let's go ahead and close this button and then let's say get started Okay cool so let's just check out how this looks like and that looks good to me and then we can go ahead and we can just say underneath this one we can go ahead and we can put a link so we say link and we can say HRA we don't have a docs one we have a contact one so we can say contact so uh the there's no difference between this and this right here uh you can you can just make it contact uh that will work the same uh all we have to do is close it yeah then we can go ahead we can include a button so we can just take this button and we're just going to have to change the color a bit but that's fine so instead of get started let's have see how it works and the reason why I'm wrapping in this button in a link is we could have really just passed in an atref to this link but uh it's fine either way it doesn't necessarily make a difference and all we have to do is just change uh this for uh background color so background black to 500 so anytime someone clicks on this button we're going to get redirected to our contact page and again uh this contact page which we made earlier by kind of illustrating or demonstrating here that we have a folder called contact with page. CSX with its own um kind of function there so let's go ahead let's go back and all right so that right there is I mean looks perfect to me looks very similar to what we want to build yeah so looks good so let's go ahead and let's continue um the next thing I want to do is I want to go ahead and I want to add in um some framer motion stuff as well as uh like the actual images that we're going to be using so when I reload this page here you're going to see that we have uh kind of these kind of images like shoot up which I think is a super nice effect and we can always change uh how they look or what they're going to do but yeah let's go ahead and let's do that so now what I want to go do is I want to uh add a new terminal all just click that plus sign so if you didn't get the chance to see that all I did is I went down to the terminal I think it was like down like this click this click the plus sign I say mpmi framer motion Okay cool so framer motion is going to be the package uh that's going to have all the modules that we're going to need to go ahead and really build this thing out uh with all the different animations that we want so let's go ahead and let's continue building from there so we'll say div and then we can go ahead and just put it down move it down a bit div class name I'm going to say medium d10 uh or medium I should say p d okay pt-10 sorry about that item Center space y-10 you say MD I want to be a flex but if it's it's not a mediumsized screen I want it to be a flex call and so that happens naturally within um a tail tail1 CSS that it's preconfigured that way so that's why we don't have to identify that this is a going to be a flex call uh which is going to be of course vertical so justify Center I'm going to say MX Auto and say MD space x-10 and then here is where I want to go ahead and import my frame motion stuff so I want to go down to here and I want to say import uh it's going to be framer or not framer sorry it's going be import motion from framer Dash motion so make sure you have this because this is going to be what we're going to use to to add in the effects so let's go to this and let's say motion DOD let's close the div right away so that we don't have an air and then inside of our motion. div I want to apply some styling so I want to say initially I wanted the to be Set uh on the y- axis so do equals Dash or curly bracket curly bracket y- 100 and I'm want to say opacity is going to be equal to zero and then underneath I want when we animate I want it to be the opposite so I want the animation to kind of push the image up so now what I have to do is I have to add an image in between the motion. div so I want it to refer specifically to this image and I want to say I can also actually go ahead and add a class name which is fine so let add a class name we'll say px-10 I'll say MD px- Z and then I want to add my image so I'm going to do import I'm going to say image make sure it's capital letters I'm going say it's saying Source images illustration 1.svg I'm going to go ahead I'm going to put that there because we don't have any other images right now we're going to need an ALT tag so we can just say illustration and then we're also going to need a width and a height Okay cool so let's go ahead and let's close that up and let's see what we got so so I'm going to go back to my local host out 3000 it's going to say is it saying saying react is not a function H let's go ahead and try to debug this as quickly as we can ER so maybe what I'll do in this case is I'll just going to shut down my terminal because I think that it's probably going to be a little bit of caching here I'm going to say mpm runev going go ahead I'm going to reload this let's see what we got it's it's loading for me let's see okay so we are getting get the same err so let's try to figure this out framer motion it looks like we might have to install a number of other packages so let's go check out frame motion uh mpm framer motion I'm just making sure that I actually use the right thing let's go ahead and add another terminal let's close this one and Let's do freame remotion let's try this again mpm run dead [Music] um I'm go ahead I'm just going to close this see what we got Local Host 3000 okay so I'm getting the same air right now I'm going to go ahead and try to figure out what this is uh just give me one sec hey guys yeah okay so sorry that that was a very simple err uh it was just mistake on my end but of course like as I'm learning you like like this is a learning process for me as well so what I forgot to do is essentially whenever we're using frame or motion uh this was the air that we just previously had we have to make sure to say use client at the very top so let's say use client and now you're going to see that the air is going to go away uh and you're going to have an image uh and obviously this image doesn't exist right now because again we don't have an image pointing to that specific um you know file we don't have like this source is not actually going anywhere so I went ahead and I just using the SAA website I went ahead and I I just downloaded uh a number of these images and I just added them in to my my project so uh if you guys want to check out the GitHub down below um that is where I'm going to have all the images just to save us time so that we don't have to keep going back and forth um I'm just going to go ahead and I'm going to import those images now so into my images folder I'm going to just uh copy all these in so I'm just going to say this and then wherever my images are I'm going to pass them so a folder so I'm just going to replace that yeah so now I have um I don't I shouldn't have a I shouldn't have a first section here let me just what's this uh this is going to close this here we don't need that so I just I just need my first section and then I just need my images here so all I did there is I just imported my images to this specific file so now when I go go back to my first section and I say images instead of illustration. one I needed to actually point to something so I'm going to say tab one and it is a webp file so let's see Okay cool so I have my images there I hope that wasn't too complicated for you guys uh all I did there was I just added a use client to the top of this file and then I pointed or I downloaded any images uh from the as website again you can go ahead you can use your own if you have um it can be a video it can be anything really and I just all I did is I just pointed this tag specifically to here so I have that there now all right now if I'm not mistaken the animation actually should work so let's go ahead and it does yeah so it's really fast uh it shoots up kind of nice I really like that uh we can go ahead we can just actually uh replicate that three more times uh because we're going to have two other not three more times two more times I should say so this oh didn't mean to do that say this motion. and then motion. as well Okay cool so I have my images you know shooting up from the top or from the bottom I should say and I want to go ahead and want to change each image to be its own uh kind of have its own illustration so tab one change this to tab two and then I'm going to say uh whatever oh this one the middle one should be tab two sorry and the last one should be tab three Okay cool so let's see what we got going on here now how does this look all righty okay perfect that looks really good to me that's the exact same effect that we were able to replicate in our project uh or in the published one I should say but yeah that looks good to me so yeah if you uh if you got a little confused there that's completely my fault just go ahead and check out the GitHub repository for uh the exact images that I'm using uh and if not just go ahead and add in your own cool that looks good to me and then let's see what this looks like on mobile so I'm going to go here and that looks really good so far and now I just want to reload this page oh this is going to be a little bit difficult because yeah it's going to break Ah that's okay like this okay cool so it doesn't I'm not able to get to reload okay it looks good as well so yeah that's perfect we have completed our first section now for some odd reason the Navar style that I talked about earlier is not being applied so I want to go ahead and want to figure that out so let's go back into our where's our code here it is and let's add it in so where is our nav bar and then I want to say I want to add in I want to figure out why this is not working give me one second so we have our scroll we have our scroll that's fine we're going to say if it has okay let me just break this up a bit so wherever our B okay let's do this BG I want to go here and say if it has scrolled shadow what if we did um XL or maybe it won't just work because we have to see we are scrolling that's the thing um that's okay it's not a big thing but we can go ahead and we can try to figure this out later why I I'm just curious as to why this is not working so oh is it oh it's because oh we're not closing this wait um has scrolled Oh see now I've I've got it yeah so the issue that we have had there was we had our okay and now it's working yeah so that's all it was there is all I was doing was I was prematurely closing the has scrolled so make sure you have dollar sign curly bracket has scrolled which refers to this state that we have up here with this use effect hook and then you are saying if it has scrolled Shadow make make the shadow extra large which is this part right there which is what we're seeing and then if you have not scrolled make it so that there is no scrolling effect back okay cool so yeah that that's it there that's really good and now we go ahead we can build out the other component so the next component in our project is going to be our let's go double check it's going to be our second component but it's going to be referring to this one right here all righty let's do that so the next thing I want to do is I want to go ahead and I want to go into my landing page again and I want to create a new folder and I want to call it second section again making things as very clear as possible just so that I have an idea of what everything is so I do page. TSX and I want to do the same thing sfc and I want to call it second section you can call it whatever you like but just make sure that you import it properly so second section oh this should not be Capital this should be lowercase still on caps lock div I say second section cool so now let's go ahead into our page. TSX where it says app brackets landing page page. TSX text and let's import it so let's do second section cool so let's see so we're importing second section from do SL second section SL page and if I scroll to the very bottom here it's very hard to see but we do have our second section which is good so now we can go ahead and we can add some styling to this so let's go to our page. TSX second section page up sorry I should say and now we want to go ahead and render out just want to for reference here what okay so yes we have some images nice all right let's build this out so what I want to do is I want to uh again use we'll just import some stuff right away so make sure you have use Clan at the top can't forget that so use client I want to say import I want to say Arrow right from Lucid react as well as check it's going to be Circle two from l oh if I'm not mistaken actually uh from Lucid it should be from check okay check Circle two sorry about that from Lucid react I want to import an image I want to say import image from next image I want to import motion from frame or motion want to import the use ref from react and then I want to say import use in view from frame motion as well I want to say import uh should not be caps should be import use state from react as well Okay cool so the way that I'm thinking about this is I am considering these this right here all the way to the bottom so this white part like this white back background everything included here to be one section so this will be the second section but it will include all of this as well as all of this so we can add that into our coding so when I'm coding I think about where certain functions should go just to indicate what we're building so essentially we should look to build this we should preset this data in an array and then we can go ahead and we can call that array in a bit so let's go ahead to the very top of this function or out of this function I should say and let's import or let's create a new uh array called const and I called it tabs you can go ahead and you can call it anything you like you can call it options you can buttons it can really just be anything and essentially all I'm doing here is I'm saying that I want to create an array and I want to Loop through the array with different data that's displayed here and so when I click on marketing teams I want this information be related only to marketing teams and then there to be a difference between it teams operation teams and so on and so forth so in that kind of thinking we can go ahead we can say const not con but we should say a name we should call it marketing teams this should needs to be a string so marketing teams then I want to put a comma and then I want to say title and then I want to say uh I want to refer to whatever I had it here so deliver impactful marketing strategy so I'm just going to copy and paste it just so to save some time again make sure everything is a string or else it won't work so by string I mean by putting quotation marks around it and then I want to close this one and then I want to kind of talk about what each feature is so I want to go ahead I want to say feature one again you can call it you can call it really whatever you want so campaign planning uh let's do planning then I want to do feature two let's see if I get an autofill here feature two uh uh content creation not sure that works for me feature three uh let's just see what we got social media management okay cool and then I also want to add in an image so I want to say images tab-1 so again tab-1 was just the earlier image that we imported to our project but yeah so I've gone ahead and I have all of this uh preconfigured here and now in the GitHub repository so just to save time again make sure uh just to check it out I'm going to go ahead I'm just going to copy and paste it so that we don't spend too much time uh working with just just the text and stuff like that so that is what I have in my project right now referring to different content as well as uh images that I have here so again just make sure that in your project you have a different like if you didn't call yours tab one and you're not using the same images you can go ahead and make sure you're pointing to that specific one but yeah um that's that and now we can go ahead and we can continue building out uh the rest of the project so okay here we want to go ahead and we want to say const ref to I want to say use ref hook which essentially just checks whether or not that this if this object is in view or not and then I want to say const is in view I want to say use in View and then I want to say ref and then I want only want to set the animation to occur once so once equals true so all we're doing here is we're checking to see if the object is actually in reference like is in View and then if it is we can render out the animation so then the next thing I want to do is I want to say const um active Tab and I want to say set active tab U state zero and then I actually need to specify a little bit clear more clearly here tabs and I want to say z Oh not nine but zero I want to close that tab as well cool so what I've done there is I've just went ahead and I said uh looks like I'm getting an air here uh let's try to oh I did forgot to close this function here so all I'm saying is I want to check whether or not this is in View and then if it is in view I want to go ahead and I want to apply some animations to it so I hope that's not too complicated but I think that should make a little bit of sense and then also when it's active uh display the active one so that's this is the animation that you're seeing right here okay cool so let's go ahead and let's just immediately say uh ref equals ref and then we can say class name Flex Flex call so justify Center and say items Center and then if it's a medium size screen we want to say set the padding to 20 on the y- AIS and then if not we can just say padding -10 and then we can also go underneath here and say div and then we can say let's make this on another line here div and then we can go ahead and we can say class last name Flex justify center items Das Center and then we can say another div here and we're going to say style equals say transform we can do we can rotate it if we want uh in this example I don't really want to do that but again make sure you're using your btics here oh this supposed to be a semicolon back and then let's say Translate Y is in view 100 pixels so that's perfect auto fill right there by GitHub co-pilot we're saying that if it is in view translate it if it's not in view don't translate it so let's say opacity we're going to say if it is in view set it to one if it's not make it set to zero and then underneath we're going to go ahead and say uh make sure you put commas at the end of each line we're going to say transition and then we're going to say uh get it ease in uh 1 second that works perfect to me and then the next thing I want to do is I want to go uh down or like inside of the not down I should say but like outside the the style like where we're hardcoding the HTML I want to say class name I want to say MD Flex I want to say MD space X20 border b m dpy-10 okay and then I want to close that like this the next part is we're going to say div we're going to say class name space y-10 and then I want to say div underneath class name text 3XL and now I want to import I want to just put the text so I want to say 80% uh yeah we can say 80% of teams say bird helps them faster and our original product we said this 80% of for 100 companies use bird it's the text doesn't really matter it's it's your decision what you want to put uh but I guess for you know consistency we can just keep it at this so let's say that okay cool so then outside of this div this is where we want to create uh the arrows and stuff like that again why is this caps locking but div class name Flex items Das Center space x 8 I want to say I want to give it a hover effect so whenever I hover over the get started button I have a little bit of an animation so so when I hover over this you'll see that it turns blue this is something that they have in on the ass website however theirs turns red so that's going to be that and then let's say C how customers use bird again you can change it to whatever company that you'd like now I want to import my arrow right so import Arrow right and I say class name width D6 height d 6 and then margin left four cool now underneath that I want to go ahead and I want to import my motion. di so this is where my animations are going to happen so I'm going to say motion. div close it right away so that we don't get an air it doesn't break we can say oh we're going to have to import images but I want to apply some stuff here so I want to say initial and then I want to say yeah y 100 opacity Z animate the opposite class name here I want to say grid grid calls to MD Flex I don't want it to be a grid if it is a medium size screen space or MD space should be X10 items Center and then justify Center py d10 okay so if you're wondering what this is pretty much what I'm doing here is you should focus up on here when I get to a small screen I want it to turn into a 2X two uh grid and that's what I'm setting here I'm saying the GD the grid is going to have uh like it's going to have two columns so it's going to have this one and then this one uh and then if not once I break a certain point it's going to be in a straight line and so that's what what I'm saying by uh like MD Flex so I hope that makes sense if not let me know in the comment section below and I can kind of clarify some stuff but yeah so now what we want to do is we want to go ahead and we want to import actual our actual um images so you can see the animation that we just appeared I'll refresh the screen a bit and then that's that right there cool so let's go ahead and import some images so I I've gone ahead and again I already have existing content that you can go ahead and copy and paste but that is that right there so all I did again just to reiterate I went to logo.com if you haven't already please do so go to logo.com and then download a bunch of these images and then all I did is I created a folder called logo and then I put all of my logos in here and all I'm doing is I'm just calling each of them to a specific image right here so this is my source I'm pointing it to this one and then I'm just saying uh putting it underneath this motion. so that when I reload this again this is the ass's this is ass's actual website and this is hours so it's a little bit similar but yeah pretty much all I'm going to do is you're going to see that I don't have all of the customizations configured yet but once I reload this page you're going to see how it shoots up nicely which is something that we really wanted to do so again this is what it looks like on the full and then this is what it looks like just right now so let's continue building and let's see where okay and so now we also have our we also have the hover effects we have to add in we have to make sure that these arrows are in the same spot so let's go ahead and let's figure that out why those are not working okay so that's the motion not div there and then we should have we should close the div here let's close this div let's close this div and then let's say motion. div I want to apply the same styling that I have above so just to save time just going to copy and paste it it's okay if your uh thing broke breaks right now we're not in production mode right now so it's fine so I want to say class name I want to say text 4 XL let's say if it's a medium size screen let's say text 6 XL let's say pt-10 let's say hidden say MD we're going to block it uh block like the hide property and then we can do this we can say see how teams use bird Okay cool so let's address some of the issues that we have right away uh and we can just close this right to all righty so the next thing I want to do is I just want to obviously I want to get rid of this because we're not going to need it and then let's try to figure out what exactly is the issue so seems to me that we don't have uh a number of these not closing properly um so we can go ahead and we can just do that really quickly so what our motion Dot div is here um underneath this image this motion. div we are closing it which is correct but then underneath here we're not closing it so let's see if we get an auto fill of how to fix this div div seemingly not working here let's try to give me a sec here to figure this out div item Center py just going through this slowly this is being closed correctly yes div div okay on do we have this div right here okay so this is in the wrong spot so this should be right here and then we can go ahead and we can say div and then underneath here we're closing this dip prematurely okay so that's what it was right there we were not closing the div in the correct Place uh and as a result we're getting those issues so let's see how we looking now and that looks perfect to me so that's all it was right there uh just to reiterate what the uh problem was we had close the div here uh it's so underneath Arrow right make sure you have one div a second div and then remove that third div that we had and then remove it at the bottom as well so that now you have a fully functioning uh section so once it Scrolls into view it kind of Fades up nicely all righty cool uh let's see what else we can add here um where was my project yeah okay so there seems to be a little more padding here uh than compared to what we originally have so I want to figure out why that is and I think I kind of know why that is but Let's do let's go ahead and let's figure this out so pading is 10 Translate correct uh Space X oh see this is what it was so on a medium size screen we had DM but it was supposed to be MD so go head to where I had line for line 85 for me I'm not sure what yours is but wherever we're styling this right here just in inside of where it's say this style underneath we had uh a little typo where supposed to be have D but it was DM Okay cool so you have that now uh working exactly how anticipated and then that's perfect so and then it goes back which is nice all righty that kind of that's that one now let's go ahead and what else so we have to build out our tabs now so yeah we have to build out these components so let's go ahead and let's do that now this one won't be too difficult we're just going to kind of loop through the array that we created up here if you haven't already please copy and paste this so that you have exactly what I have uh which is good now okay where it says see how teams use bird I want to go ahead and I want to create a a div right I I want I want something to be there so say div and then I want to say class name I want to say hidden because we don't want this to be originally we don't want this to appear unless you're on a uh on a desktop right so just to reiterate what we're building here uh let me go back to this so I don't want this these options to display unless I'm on a desktop because that would be insane right like having all those different tabs fundamentally just doesn't work well on like a website that would only be uh or like from somebody coming from as a as a mobile uh kind of user so yeah so we're going to hide it and then we're going to go ahead and we're going to to add some stuff so we're going to say brackets curly brackets tabs. map yes that's correct and then I want to apply some styling so I want to go ahead I want to say div and I want to close the div right away so that we don't have any errs and then the next thing I want to do is I want to just close uh this as well so if you get an air right now that's completely fine all it's saying is that it needs a key index which is fine so we can just say we have that already so we can just say key equals tab dot name and then your are is going to go away the next thing I want to do is I want to do class name and I don't want to use quotation marks here I want to make this have like a bunch of lines as also a number of other classes so we're going to do curly brackets we're going to use the back ticks again not sure what they're called exactly but yeah so let's do not first letter I don't know what that was let's do Flex again I'm getting the same try to yeah space Flex let's say justify Center item Center I want to put this all so vertically so you guys can see the better justify Center item Center space X10 and then I want to say width 60 so make sure you have these class names and then I want to go ahead where I created my states where I'm saying like the active tab I want to apply a certain styling so that people know that they've clicked on one of the tabs right so in my project what I did is I made it so when you click on it there's a border and also the color uh becomes darker so again I think that's like a really good way of indicating uh which one like you actually clicked on it right so let's go ahead and let's add that in so we can say dollar sign right because it's a conditional class so I'm going to say dollar oh sorry dollar sign and then yeah pretty much this fill in right here is correct but I'm going to change some of the styling so going say uh curly brackets say active Tab and to say equals tab question mark So if I'm on that tab that I want I want to say border want to say border oh sorry border bottom is going to be four and I'm going to say pt4 and then I'm also going to say uh not yeah I'm going to obviously I'm going to pick the color so I'm going to say border Gray gray 500 and then the text is going to become darker so you can you can make this text black if you want I'm just going to make it 800 and then I'm going to say if you're not on an active tab uh what I'm getting here is an error so this what this means is it has to be equals equals so you have to have three equal signs or else you're going to have an error so that was a good catch right there I missed that one so that's fine now what we're going to say if you're not if you're not on the active tab all I want to do is I want to mute M the foreground so this is a property uh that is is done in tail and CSS um so what it basically means is uh you can see the styling if you hover over it but all it's doing is just making a little bit more dim uh and then originally so let's go ahead and let's see what we're getting so right now we're not we none of our like Tabs are being displayed but that's fine so now next thing I want to do is I want to say on click right like obviously I want to click and then okay so I got the auto fill there but all I'm doing is when I'm clicking on a tab I'm setting the tab the active tab to be the tab that I want to view and then that tab is going to have the these properties so that's perfect and then I'm also going to say style is going to be equal to a cursor uh pointer so I just want to make it that make sure that people know which one we're clicking on uh you can you can click on these that's pretty much all I'm indicating with with that function there so okay now let's go ahead let's go down say div uh we're going to need another closing div here so div class name say Flex I want this to be obviously in a row I want to say text 3 XL I want to say text Center say items Center I want to set the height and the width of them to be equal to each other and then I want to say justify center now here is where I want to render the tab name so I want to say div uh and then I want to say uh tab tab. name so if you're wondering why is this called tab. name all this is saying is it's going up to our array here that we created called tabs it's looping through each of these so each of these are their own tab like not like not plural Just One Singular and then it's saying that the name is going to be called here so let's see if we have it now and we do so underneath we have tabs so these are the tabs and then whichever one is active uh is going to have the properties so I think that was a good kind of demonstration of what we're building um one thing that I missed here is the padding of these are way too close to each other so just what I want to do here quickly is go to the very top where it says see see how teams use bird I also made a little typo there as well so what I want to do is I want to add some styling so py uh should be maybe 20 Okay cool so now it's just it pushed up everything on the Y AIS uh as well as down so that way I can you you can see now is pretty much all it was as a nice little change because it before it was a little crowded okay cool now let's go ahead and outside of this div we actually want to go ahead and we want to display the content now so we want to render this part of the project so underneath this div here I'm going to go just just put some lines there so that I know what I'm talking about or where I am and you can see it there but okay um sorry about this I'm just trying to get the right one open not that one I want hours Okay cool so let's do that um so here what I want to do is I want to display the content if it's even if it's not selected I still want to have that content so div class name pt-10 not Mt but PT did it again there p I want to say hidden I want to say MD block right CU I don't want this to be displayed uh if we're on a medium screen then I want to say if it is we're on the active Tab and I want to see and and so I want to just create a bunch of uh like space right here I want to say dip class name Flex I want to say justify Center I want to say t I'm going to say this is going to be some we're going to hard code some styling here so we're going to say style and we're going to say height and then we're going to set the height of this div to be 525 pixels so again make sure you're in a string 525 PX and we're going to set the width as well so we're going to say width and then we're going to say uh this one's going to be a bit bigger so we're going to say 700 pixels and then we are going to close it which is perfect and then we're also before we close it we have to add some some more Styles so we see Flex call BG grin 200 I'm going to say p-10 and I'm going to say rounded MD because I want it to be a little bit rounded and then there from there I can go ahead and I can say I can render out my the like the title so I'm going to say p class name say text forx l p y-10 border B and then I also want it to be underlined as well to really indicate uh what's going on underline and then I want to say active tab. tile cool so I'm going to go ahead I'm just going to close all these divs out so that you can kind of see what is going on uh so I made a mistake right there what I need to have happen is there so let's go into our project now and perfect so now what's happening is whenever we're clicking on the certain one the certain content that we rendered in the array uh is is we're transitioning between all of them so that's perfect there all righty now the next thing I want to do is I want to go ahead and we need to obviously build out the neighboring div to the right of it with the image so let's go ahead and let's do that so we can go ahead underneath uh again we can remove these tis because we won't don't need to close it right now but the next I want to do is I div I want to say class name space y-10 I want to say items Center justify Center and then underneath I want to I want to kind of create my list of features so back up here where I was referring to these ones I want to go ahead I want to display each of them so let's go ahead and let's say justify Center and then we can say class name we can say Flex we can say space X4 so this is going to give us space between the icon and the actual feature like the text so let's say that and let's say check Circle 2 class name as well as text Gray 500 and then underneath I want to put the LI tag and I want to just say active tab. feature. one okay cool so that works for me and now what we can do is we can go ahead we can just copy and paste this a bunch of times uh and we can just change it from being feature one to feature two to feature three so paste paste and then change this right here so instead of so keep the first one obviously it's feature one and this is feature three and then underneath we can go ahead we can just close everything out uh actually before before that we want to go ahead and want to display the images so so underneath the LI the UL the div and the other div here I want to go ahead and want to create another div and I want to say uh I need to hard code this obviously so we're going to do style and then it's going to be the exact same property that we just had up here so we can just copy and paste this so we can say this so that the two boxes are like equivalent size and then underneath I want to go ahead and I want to add the class name class name and then I want to put this is a gradient so we're going do BG gradient to the right say from Gray 400 to a gray of 100 so from going from left to right it will become lighter and then underneath we can go ahead and we can say item Center justify Center rounded MD and then we can also say Flex all righty now the next thing we need to do is we need to actually display the image so so let's let's get our images in and then our source in this case is going to be this exact thing so what I did here is instead of pointing to a specific one we are going to Loop through the array and then depending on which tab is selected is going to display the image belonging to that specific tab so you'll see how each of these have their own I've repeated this tab one just because I ran out of images but again if you have your own images uh you can go ahead and display those specific images so then let's set height and a width as well as an ALT so alt illustration works for me width and then height and then we can just change these to be 530 and then we can say um yeah we could also round them as well so why not let's just do class name class name do rounded MD yeah that's perfect and now let's close everything out let's close this and then let's go ahead and let's close this as well and then we have one more thing to close and then all of the air should go away so I'm going to so what I'm using here to make everything look uh much more complete uh and like have less gaps is I have an extension called prettier I'll show you what that one is it's called prettier it's free to use um pretty much everyone uses it 37 million downloads if you don't have this one make sure to have it installed all it does is whenever you save your code all I did is I went up click save is it just reorganizes it to uh be much more like visually appealing and legible so that's all I did there okay cool and now that we're going scrolling down we're seeing that we have different tabs perfect so the images change as well as these change here as well as the title changes and that looks good to me all right so I think that kind of completes everything let's check what it looks like on mobile and of course we don't have it on mobile because we we made it hide so that's that's perfect awesome yeah so that's that's a really good start the second section is now completed let's go ahead and let's do our third section now okay so let's go ahead and let's continue where we left off at uh I believe it was where is the code here going to close this yes it was right here uh we had completed our second section uh and let's go and let's build out our third section so we are looking to build out this portion right here uh which won't be too difficult to do so let's do that right away so again inside of our landing page let's go ahead and let's create a new folder called um it's called just third section same thing as last time we're going to create a page. TSX and then inside of our page. TSX we going do sfc and do third section div div then we can just say third section and then inside of our page. TSX so where we have our na bar first section and then second section let's create a our third section Okay cool so this one's going to be pretty easy it's just a couple of columns or rows rows I should say so let's just do that click into our third section here and then at the very top we want to go ahead and we want to say use client let's make sure to do that then I want to import check Circle icon 2 from Lucid react import motion from frame motion import the use ref from frame motion we're not getting the Imports we have to do it by ourselves so import use ref actually just from react and then we do import use in view from frame or motion then we want to go ahead we want to set how our like ref so we can say const ref equals to use ref hook you can say const is in View and then again same thing as last time where we saying we only want this animation take care once the next thing I want to do is I want to go ahead and want to do motion. div motion. div and then want to apply the parameters right here so let say ref oh ref equals ref in curly brackets then I want to say initial and then I want to animate and then I want to use a transition as well transition uh we can make it like 10 seconds it doesn't really matter you can make it however long you want but pretty much this is just going to illustrate like how long uh like we're going to have like the slide in effect but yeah let's do our class name let's just say Flex flexx call and then we want to say space y-10 then outside of this div we want to say div and we put another div actually div class name go to the very top again we'll do padding y-20 uh so they use like a green on the ass website so I did my best to try to replicate that uh if you want to know how I get these actual color codes all I do is I go to this website here called uh hex codes it's called like HTML or something like HTML hex codes uh color codes sorry but then yeah pretty much all I'll do is I'll just find a color that I like and then it will show me uh a hex code for it so I went ahead and I already had one so I'm just going to use that one instead but going to go back to here and then I'm going to add the color code so let's add that so we going do BG bracket number sign 09 79 69 close my bracket and then I want to say items Center Flex call space y-10 then I want to say class name text white text for Excel I want to put a padding of 10 on the X x axis if it is a uh small screen uh if it is a bigger screen I want it to be zero so P padding X zero MD text 6xl going do MD padding bottom-10 Flex items Center justify uh start cool and now we can just say why companies choose bird underneath this one I'm going to go ahead and put div say div class name MD width 3 over4 padding X10 and then I'm going to say div class name Flex space X10 MD space X20 text white items Center text 2XL justify Center border b u make sure you guys can actually see this a little bit so I'll move this a close this so you guys can see border B I'm also going to need a border T only on uh small screen so I'm GNA do border B and then border t as well so py d10 oh this T has to be connected like that P y-10 and then here I'm going to go ahead and I'm going to put my icon so I'm going to say check Circle icon Circle two I want to say h on a medium screen I want to be double the size what it would be like on a small screen so I'm go MD withd 80 or I should say H20 uh then MD width 20 H 10 with 10 then let's say div say class name MD with 80 MD text 3 XL text MD with 72 and then say the only platform form with goals yeah you could say that as well awesome yeah so I mean we can go ahead we can just copy and paste this uh three more times so I've already gone ahead and done that so let's just let's just do this instead uh and then yeah I think that should be it I think it believe there was three let's see okay so we have the three uh we just need to make this centered as well so let's let's go ahead and figure out why this is not centered so why companies choose bird uh okay yeah so this is what it was I have a typo here this is meant to be Center and now everything is centered awesome so now the next thing that we need to do is we need to build out the uh text to the right of it which was uh this text right here cool so let's go ahead and let's do that now so we have our text sorry about that problem yeah the only thing is I don't want have this the same text for every single one so I just want to copy and paste this so [Music] here then we can also do here as well now it looks like one other thing that we're missing is we're also missing another div underneath here referring to the last one so this is very easy to do TI class name let say MD width of half say hidden and then we can say MD block so then this is where the longer text is so you can just copy and paste this and then you can go ahead and you can just add this to the bottom of each one so underneath here and then underneath here as well simple adoption and now let's see what it looks like perfect voila so we have exactly what we wanted to create uh and then when we resize it also resizes which is nice awesome yeah that looks good maybe the one other thing I would do is I would change this to be in the center a bit more uh actually I don't know it's in line with this so kind of looks good but yeah I mean go ahead add add your own changes as you guys see fit but that will kind of conclude the third section there so let's go ahead and let's continue building out our it would be I believe our fourth section okay so this one here that's perfect okay so we'll build out this one now let's go back into our project so we can see what's going on and then we can go into our for Section so let's create a new folder in our landing page let's call it fourth section let's call it page. TSX and then our page. TSX same thing as last time sfc fourth section div you say fourth section now let's go back into our landing page our landing page page I think that's a little bit of a tongue twister but it's fine fourth section cool so we got it in there now and cool let's let's go check out what we need to build so that animation is kind of weird uh and pretty much the reason why that's happening I if we want to go quickly back it's because the transition I made it to 10 seconds but if you want to make it like much shorter which I think it will look a lot better uh and speed it up you see how like it's going really slowly uh we can go ahead and we can you can make it quicker to you can make it like 3 seconds or something so now if I refresh let's see what it looks like so we got that animation and then by the time you scroll it's perfect so yeah Al look to me all righty and then again at the bottom here you see we have four four section so let's continue building this out so in our four section I want to go ahead and I want to mark it as use client right away so I don't forget use client import image from next image I want to import use state from react as well as use fact and then I want to do import Port Arrow uh same one as last time right and then we don't actually have a check circle on this one so we don't we don't need it but Arrow right and then here I want to import um again we can import motion and then we can also import another one called use animation from FR motion from here do const images equals so this is going to the exact same thing that we did in the I believe was in the second section where we have our tabs but in this case we're going to just have images and then we're just going to Loop through the images so we going to say uh SRC and then I'm just going to point to one of them so I'm going to close this object and I'm going to open another one so make sure that you have a comma after every single one or else you're going to get another error um so tab two and then I'm also going to have tab three as well so so you see how the air I'm getting right there it's it's expected but yeah so let's just add that and then it's going to go away okay cool so let's go ahead and let's add in some more I guess you could say animations so what we're going to need is we're going to have different set let's just check actually really quickly what we need so here do we have any yes we don't even have animations to this one so this might actually not even be necessary which is fine we can add animations to it if you guys if you guys like but I think just for for Simplicity and for the sake of like this video not being too long we can kind of maybe do without so yeah I would I don't know we might not have to necessarily use these so yeah let's just let's code the content and then at the end we can kind of decide div class name so Flex this one here is going to have a lot of styling so yeah okay so Flex Flex call space y-10 items Center justify Center padding X20 div we can just delete this fourth section the text does not matter right now we do Flex do p y-20 and then we'll do class name do space Y6 Flex Flex call and then we want to do div and then we'll do class name text Gray 800 text XL and we do padding X10 and then we're going to go ahead and say all caps Drive efficiency across teams then underneath this one we're going to say div again why is all caping div class name text 4 XL width of 96 padding X10 going to say manage manage complex complex work easily and then just so let to visualize a bit easier we can say that and we can say another div here say class last name text XL text Gray 600 then padding X of 10 Okay cool so now we can add in our text we can say connect what needs to get done who is responsible and how and how to get it done I think that's a good amount of text there so so to see what we did there let just move this to the side so that's all in one line cool so we have the text there that's perfect uh maybe I'll just put this down so you guys can see underneath this div awesome now we are going to continue so let's just say div and then we're going to say class name oh it's outside of our div class name on the medium side screen we're going to say Flex item Center MD space x60 so you want a huge space between the image and the actual text space y-10 or yeah and then I say p p-10 sorry uh and now we're going to go ahead and add our image so div uh we don't actually have any class name to the div but we can just say image uh I don't need two there I just need one image say SRC um I guess technically we didn't really need to create the array now that I'm thinking about this but it was nice to have so I mean let's just keep it for now had you have gone ahead and maybe done more animation based stuff it would probably been recommended to do that but I guess in this case since we're just having uh three essentially like three boxes right like we have uh maybe if I have an extension here kind of show me yeah so here we have like one box and then two we have like another box and then on the third one we have another block so I guess in this case it it doesn't make sense to to have the array we could delete that actually but yeah now that I'm just thinking about that now after I made this it's fine um cool so we have that and let's make this images a lot bigger let's do 700 and then we can do underneath we can add in uh div class name space y-10 order B so this is what it's going to look like uh once once they're stacked on on top of each other now I want to go ahead and I just want to um let me see what we can do here to speed things up okay I guess we just have to do this one by one so what we're doing right now is we're building out this side of the content and then once we're done this one we can go ahead and we can just copy and paste this three times change the image and then change the text okay so border B so what that referring to is this one right here where this border is so let's go to the Border B and then let's say div class name text 3xo say time oh inside of our div say time line and I going to say div again don't know why it's doing that div class name going to say width of 96 going to say text text XL text Gray 600 not 6,000 600 now we can say see how I believe we already have the text so let's just copy paste yeah so go ahead and copy and paste it um just to save yourself some time so cool that's that and now we're going to go ahead and we're going to add in our uh arrow and like get started button so class name flex and then we going to say div class name text LG I going to say get started and now we're going to say Arrow right class name perfect so let's see what we're what we got right now so this is obviously the finished one and then this is ours let's see if our styling was done correctly and it was yeah so it looks good so what we're able to do now is we can just go ahead and just copy uh and paste this multiple times over so let's go to here so what I'm doing is I'm going underneath the padding y like -20 and I'm simply saying uh that I I want to grab all of the content related to here so it looks like this could this could result in a bit of an issue now that I'm thinking about it we might have missed a class um let's let's just give this a try and let's see so I just want to copy the entire thing cool so I copied it so underneath padding y-20 uh I went ahead and I just grabbed everything let's see what it looks like and then I'm making another space okay yeah so what's going on here is is the this is now a flex but it's not meant to be a flex it's meant to be a flex call so outside of here let's just change this delete it see what this looks like and that looks pretty similar to what we have the only thing that is different I would say is here we are me just go back to delete that one and then delete that one as well okay and now what we should do is we should we have we have our get started right get started one two three Flex CA H okay so what we need to do now is inside of okay so that was a mistake inside of here is where we need to put this class so I'm going to go back to here so I was one div too far but now if I copy and pastes two other times you're going to see that it's going to look exactly how we want it to look okay and it does which is good so we have our divs um the only thing is I'm not mistaken let's see what this looks like manage work complex looks good let's and then yeah when we change it looks good as well okay cool yeah so that was the mistake uh all I was doing was I was having um I was I was one div too far and then the next thing I want to do is actually where it says withd 96 we have a fixed um where it says manage work easily right here we have with 96 let's just remove that because I don't like how it goes into two boxes I just want it to be one box like this so let's see what that looks like on a big screen and it looks good so where we originally had withd 96 go ahead and remove that as well and then also here you can just remove with 96 as well so now it's one like synchronous kind of style uh and it really looks good now the only thing that we'd have to do is we'd have to differentiate each of these images so let's go into where our images so let's change this one to two and then maybe maybe three for the last one and then two for the second one or four I think I even have like up to five let's see what the fifth one looks like Okay cool so the fifth one is that and then yeah we can ahead we can just change a text so I'm going to go back to the domain that I've created and where it says this I'll just uh I don't know you can really write anything you want like it it doesn't matter so so let's just cool yeah okay actually I'll leave it I'll leave it there um we can go ahead you guys can add in your own text for your own project uh but right now like the main stuff is what we're focusing on but yeah go ahead and add in your own text but right now I think that looks pretty good and I think that would conclude our I think that is our fourth section now um and let's go ahead and let's add in our uh logo Carousel now so if I'm not mistaken I'm going to go check this out okay no our logo Carousel is actually at the bottom here it's fine but yeah let's go ahead and let's build the some other stuff out so I'm going to go ahead I'm going to go create that's that was our fourth section I'm going to go ahead I'm going to create our fifth section so fifth oh don't know why Fifth Fifth section go ahead I'm going to say new file say page. TSX I'm going to say sfc I'm going to create a function called fifth section div and I'm just going to say hi cool now let's go ahead and let's build out our fifth section so our fifth section first thing we need to do is we need to import it to our landing page uh so that people can actually see it Fifth section now I want to scroll to the bottom make sure that I'm in my correct one and I I am yeah so it says high at the very bottom so let's add this in so let's click into our fifth section and now we want to go ahead and we want to import some of the stuff that we use from chats and UI so first thing we want to do is import the image because we're going to have a bunch of images and then the next thing I want to do is I want to import uh the accordion so we can go to shui go to our accordion and then we can just import uh let's see if they have some stuff yeah so we can just import all of that stuff right there cool so all I did there is I just copy and pasted this from here awesome now we're going to kind of make this a little bit different uh than what the shat CN UI one initially looks like cuz we're going to have some custom classes uh like for example like we're going to have like two columns instead of one but relatively speaking it's going to be kind of similar so let's go back into this one and let's start working on the shads and UI next thing we want to do is we want to import our Arrow so we'll say import Arrow right from Lucid react and then I want to say div and then this one's going to have number of class names so class name Flex medium space X20 padding y of 20 space y10 items Center justify Center BG um let's see what else we got going on uh you need the number sign and then I'm do 282 82 and then b as well close that and then that's going to kind of be like our black background and then I want to say div again it's Auto auto cap locking for me I'm not sure why class name space Y6 Flex Flex call text Gray 200 MD with one over three yeah so we need just only need to take up a third of our screen then I want to say px10 not mxpx and then I want to say div underneath this is going to be for our text so class name text XL I'm going to say stream line your work and process is and then I just want to keep this all on the same line so it's easier to see close that I can do another div going to say this one's going to be bigger it's class name it's going to say text 4 XL and it's going to say prioritize Revenue driving work cool now I do another one say div class name text XL I'm going to say connect what needs to get done who is responsible and how to get it done and then I'm just going delete this St because we don't need that EXT do all right cool so let's go ahead and check out what this looks like we have our animations we have this nice section and then we have this right here so just to kind of reiterate what we're actually building right now just going to delete the frame motion I don't need that there yeah what we want to be building out right now is this section of a sauna right here where you have your accordion and then the images will render so let's go back to this one and then let's do that now so the next thing we want to do is we actually want to start using our accordion uh style here so to make things a bit easier we can go ahead and we can just copy and paste all the content from shats inui so right here where this usage go to the second box and then copy and paste this so copy and then underneath the High where the high is originally put we can go ahead and we can just say right above it we can just say this now we're going to have our recording on the right and then you're not really able to see much of it but it is there all right cool now we want to go ahead and we want to you know add some styling to this so let's go ahead and let's say our recording trigger and then we're going to because we're going to have a number of accordion right we're going to have like four or five of them uh building like this portion here so let's go ahead and let's do that so we got our accordion and then we got our space where okay cool so our according trigger is let's apply a class name let's say class name let's say text blue 400 then I want to say instead of is it accessible I want to say automate your workflows then the content as well I want to have the same class name so put a border B then I want to say border blue 500 now instead of this I want to just put this text that I already have existing so I want to say underneath here put tasks on auto like assigning work and then you can kind of slowly see uh it popping up right here cool now I want to go ahead and want to put a get started button I'm going to say div I'm going to say class name Flex text blue 400 same color pt4 and then I also want to apply I want to put my get started underneath so put div class name text LG and then I can just say inside of this div get started now the next thing I need to do is I need to put so just to make again things a bit easier I'm going to put this here and go back and now so inside of this div right here so not this one but the one above it I want to put my I want to put the arrow icon so Arrow right class name and that's perfect so now once we scroll down going to see that we're going to have our arrow and that works for me fantastic so let's continue um building this out so we have our Arrow we have our icon we have the content and now we have we have the item so the next thing I want to do is I just pretty much oh I made another typo here automate uh your workflows pretty much what I want to do is I want to go ahead and I want to copy and paste the item icon like three other times because these are all going to be the exact same so first thing I'm want to do is see if I can get it yeah so I just I just use prettier to make it a bit nicer uh and again I just seen so many like misspelled misspelling ears but so where accordi item is go ahead go all the way to the bottom of it and then just copy and paste it three other times and now you're going to have all of them right there which is which is good so now that we have that we can go ahead and we can start applying our images so let's do our image let's do SRC and then we can also do a class name of padding 10 p-10 so that would let's let's try and figure out why it's not rendering correctly so what I mean by not rendering correctly uh is I want this these two to be uh get into my I want these two right here to be like one line and then I want this one to be on the side so that's what I'm trying to kind of debug right now so let's try to figure that out so our accordion is flex Flex call trying to think space y should really be this okay so this div right here is not supposed to close it's supposed to be at the very bottom here let's see if that works scroll down see it okay that did not work either so let's go ahead and let's try and figure out what exactly is not is making this thing not render correctly so class named MD Flex which meaning it's a flex padding y item Center justify Center we just need Flex call text XL H close this here the issue right now is that one of these are being prematurely called um but we don't want that to happen we just needed to call underneath our accordion oh this is what it was yeah so now it should work and it does perfect so all that's going on there was we were just again not ending this div tag or these properties uh correctly we had them underneath uh but we were needed it to be right here instead so yeah okay so the next thing that we want to do is we want to go ahead and we want sorry about that excuse me the one thing that we want to do is we want to go ahead and like change the colors cuz these are all blue uh we want to make them or at least how I made them here uh is I had these just change colors so let me go back to the finished product these are all finished products um so let's go ahead and let's do that so let's do um wherever where is the blue one okay the blue one is here so we can just change this to Rose can change this to rows and then we can change this to rows as well so let's see Okay cool so we have everything being changed nicely um and then we that looks good so rows for that one and then we can do uh can do like a I think I called it Amber this one's going to be Amber as well and then do I have it yeah here as well I have Amber Okay cool so now this one changes that looks good and then we're also going to do do a maybe we do like a green one here so let's do green let's do green and then we can also do a green as well uh one other thing I'm noticing is that there's also uh Style On the Border the border is not meant to have a uh um the B like the Border color border green um it looks okay for now but pretty much all I was trying to say was like you can see that there's a white border here but then when you click it it's white and then like it's also blue I'm just trying to figure out a way to quickly kind of uh fix that up give me a sec so content border do I have two borders somewhere like uh let's see what this is yeah okay so so definitely oh so what this is or how what this is saying is if I go into my accordion content um there is already a pre-installed border to this um like shats and UI uh CL or like class or prop so the way to get rid of that is we go into our accordion and then we got to find wherever it says border and we just got to remove it so we need to go to let's see if there's a border B I believe it was okay at the very top here for line 17 it says border B so if we just remove that see that it's going to go away and now it's just one color so I hope that kind of makes sense but yeah that's pretty much how it works okay cool um that's this page or not page I should say but section complete um it let's go ahead cool and I think that that works for me now actually given us g a second thought here um I want to I don't want to make it so like just keeps getting bigger right like okay so starting with starting with this one I want to go ahead and to change the the font size because I mean it's just too small so let's just go find wherever the text is so text is going to be wherever text Exel text I'm just going to search up text don't actually okay so where it says SM let's change that to XL so everything just got bigger which is good now the next thing I want to do is I want to check why each of these Accord like why this accordion is extending in size uh you see how like it closes I don't think it looks bad per se but I I just don't want all of them to open I just want the one specific one to open if you uh if I'm kind of making sense there so let's try to figure this out if not we can come back to it later it's not a big deal but then yeah once we once we go back and we move to our other um like small screen that's what it looks like cool um I guess with that being said let's just move on to the next one [Music] and all right I'm actually I'm going to go ahead and try to figure this out because I I just I really need to okay so I went ahead and I found out what the actual issue was so now when you go ahead and you click between the different ones it will uh render only that specific one so what it was was inside of our fifth section page up TSX the accordion item originally everything had the same value so everything was all item one so whenever you were opening or closing something it was all pointing to the same thing so you're going to see now how all of them are going to open but we don't want that to happen so we want each of these to be differentiated so this is going to be item two this is going to be item three you're going to see how that closes again because it's not pointing to the same one uh I believe I actually this should be four this one should be three and then it should be two and one and now you have everything working as expected so yeah uh go ahead and you can change all the texts to be whatever you like but I really want to show uh or illustrate that uh by kind of quick kind of like fixing quickly on uh what that would look like so again on mobile what would look like cool so let's go ahead and let's continue and now we're going to build out I believe this is where the logo section is okay and it is so yes so we want to create this carousel where these logos are going to render by um it kind of like in an infinite Loop and then once you hover on something it will stop so I'm going to show you how I did that as well so let's go back to our project and then let's go into our six sixth section so in our landing page let's go to six or create a sixth section so sixth section let's do page. TSX and then let's do sfc let's do sixth section now we're going to do div and I'm going to just say hi now I'm going to go into my landing page page and I'm going to say sixth section cool now the next thing I want to do is I want to go ahead uh and show you how to build the slider so what I did for this is I went ahead and I downloaded a package called let me try and find it npmi uh slider package me see if I can try to find it uh it's not here it's fine I'm going to quickly put up on my node module in my completed project so that you guys can see what I'm talking about so it was called um this is called something it was react slider or something like that okay it was called here it is react infinite react infinite logo logo slider something like that and yeah so this is the one I used so this is uh not mpm which is okay but pretty much uh you can use it the same so what you're going to do is you're going to take this command line and you're going to run it in your project so I want to do this I'm going to say this and then I'm going to say I'm going to create a new terminal so you can shut you can just add a new one and then you can just say mpm install react infinite logo slider now you're going to have uh the slider effect uh be available in your project and then you can go ahead and you can actually use it so let's go back into our sauna and then let's go to our sixth section so what I want to say here is import let's go to the very top again we're going need we're going to need a use client here we're going to say use client and then we're going to say sorry about that say import react from react we're going to import slider from react infinite logo slider so what you're going to have next is you're going to have an error it's going to say sliders declared or you're going to have a different error where it's going to say it's like could not find a declaration module and that's fine uh and I'm going to show you how to kind of bypass that as well so next thing I want to do is want to import image from next image the same as we've been doing the entire project now so what this is saying uh so you have this one air but then you also have another one where it's saying uh try adding the types and if it does not exist add a declaration so let's go ahead and try this first and let's see if that will work it's not going to work but you're going to get this error saying not found it's not a registered mpm package um that's fine so what we want to do is we want to go ahead and we want to declare it as an official package so inside of our sixth section I want to create a new file and I'm going call it page uh not page. TS I want to call it slider. D.S okay so now what you want to do is you want to declare the module so you want to say declare module and now you want to write what it was saying so react infinite logo slider and now you're going to see the air is going to go away so the air is no longer there and that means that's perfect and we can go ahead and we can actually just use this directly so let's go into our div let's say class name padding y 20 and then we can actually just call our slider so we'll say slider let's give it a width of we can say 100 a th000 I'm going to use just two 200 pixels so 200 pixels I'm going to say duration of 40 seconds you can make it whatever that's fine I'm going to say pause on Hover to be true and I'm going to say I want to blur the borders so once a um uh like a logo is coming in or leaving it looks like it's being uh like blurred it's a nice little effect um I can kind of show you you won't be able to see it now but it's a fairly common thing that you see a in a lot of like websites nowadays so the next thing I want to do is I just want to go ahead and do slider. slide and I want to go ahead and I want to import my logo so I want to say image and let's see what that looks like so it's going to load it's going to say at. map is not a function uh let's see what that's trying to say there slider slide uh let's see here I'm going to go ahead and I'm going to use the code that I have already existing and okay the air went away so yeah my recommendation to you is to just grab the code that I used in the project all I'm doing here is I'm just pointing this logo to this slide and then the slider is just going to go so let's see what that looks like and that looks perfect to me so you're seeing as the images leave if you hover it stops but as they go away they kind of fade and then once they come back in uh they're also coming in like with a fade as well so yeah so that kind of concludes this uh section it's a nice little effect you see it in a lot of websites nowadays uh and this is how you do it so yeah so just uh you know maybe including into your own projects uh I think on the ass website they have a very similar effect uh however they use a little bit more like custom cards and stuff like that but I think given the amount of information in today's tutorial uh we're not going to go ahead and do this because I mean if you want to you can like there's definitely enough information um to do so but for now I think this is good all right so let's go ahead and let's continue now we want to go ahead and build out the seventh section so the seventh section was I kind of you know mapped it off this and then this what looks like in our final project so or actually no this is our seventh section and then this is the eth it's fine so let's go ahead and let's go back into our project and let's create our new folder and it's going to be called um 7th section and then we're going to call it page. TSX and then sfc 7th section say div and just going to say seventh section let's go back into our page. TSX and let's just import this right away seventh section so the you can see how the Imports are all very consistent because it's all coming from the same R uh so let's go find our seven section which is this one and then we can go ahead and we can add some styling to this one cool so again we're going to need our Arrow right and import Arrow right Luci react import image from next image and then I want to go ahead and I want to say div do class name Flex oh class name Flex Flex call MD py20 mdp d4g p-10 and I want to go ahead and put a custom color code here uh p-10 sorry about that BG and I'm going bracket do a number sign I'm going to say E5 e 4 E2 and then I'm going to close that as well uh and then I'm going to say so it's going to be kind of like a light gray um and I think it's going to look nice so what's going on right now give me a sec then I do another div class name and do space X or Y6 sorry do Flex Flex call mdp x 20 cing bottom 20 10 and then I want to say div class name text XL and then outside this one I want to say get started easily and then I want to again make this all in one line so it's very easy to see get started easily now I want to say div now I want to say class name let's do text for XL which will be kind of like the title and then I'll say prioritize Revenue driving work work and then we can also add in another one let's see here we can say div then we can just say connect what needs to get done who is responsible and how to get it done class name oh should not be children needs to be class name class name text XL awesome so let's continue building from there uh we can go ahead we say div uh this div needs to be we're going to have an airay here it's fine uh but we just need to say div div so we have div we have these three here uh should not be three it should just be two actually cool so we have this TI closes this one this closes this this closes this and this close that cool all right so let's say div class name MD Flex MD px20 MD space X10 space y y-10 MD space y0 and now I want to do div class name grounded small BG white I want to do a padding of eight so when we're building this part here uh we should be thinking of like boxes and then having this little box be inside of a bigger box along with this text and then this text as well so that's what we're kind of doing here now next next thing I want to do is I want to do image uh let me go back to our project so we can see it so again you're just going to have a bunch of Errors which is fine so image and then I want to say uh Source you can do the first one width height illustration and then we'll do that so another thing I want to do is I want to add a class name so I want to say class name width is the 96 and then now you're going to be able to see see it a little bit better believe and you are yeah so you're able to see it there which is fine cool so let's go ahead and so we have our first one what we need to do is we need to figure out why this is closing prematurely you need to get done and then you have the two there okay so we need dis BG h where our images yet okay so now out inside of this div here where it's BG white we need to say div class name text 3XL pt-8 and then I want to say start with a template and now you're going to be seeing if all things working correctly H curious as to see why this is not let me just refresh FL okay so we have our image and now we're going to yeah okay so that's correct yeah image and then let's go into our div let's do class name pt-10 Flex justify between and then we can add another one it says div class name text XL it's going to say view templates and then we're also going to have to import import our um logo for not our logo I should say but our Arrow so let's say Arrow class name H6 with 6 ml D4 and then I'm going to close it like this all righty so now we should have our card let's go all the way down to the bottom and we do so we have our title we have our like slogan we got everything else going on there now what we need to do is we need to uh copy and paste this two other times so that one will appear here and then the third one will appear at the end so let's go to wherever it says this should be start with a template view templates yes okay so wherever it says rounded SM is where we need to copy and paste from so copy for me it's line 17 wherever this BG white class is for you go go ahead and do this now you're going to see two other versions right there and perfect voila you have gone ahead and build out this component we're going to go ahead and we can change the text to be whatever we'd like now so let's change this one to uh C bird in action so we have start with the template let's see this one here and then let's do talk with our sales team cool and then we can change the this to be a contact sales let's change this one and then this one will be a view demo or something and maybe this one points to like a video page and like demo and then we can also just change the image as well so let's change this one to the fifth one or fourth one and this will be the fifth one for example doesn't necessarily matter uh as it's all going to kind of render the same so perfect yeah I actually don't really like that too well uh I want to go ahead and want to change that so this one should be let's do three and then we want to do I think for the last one we can do like tab two maybe let's see yeah so I mean try to find images that have like similar size so that your layouts like look you know similar uh but yeah I think this kind of completes what we're looking to do here and yeah of course you can always add in your own styling to Jazz it up make it a bit different but we've got our logo now we've got this little thing now we can go ahead we can build out our eighth section so let's go create a new folder it's going to be e section and let's do page. TSX same thing we've been doing this whole time do eth section oh section div and then I'm just going to say hi immediately go to our page. TSX and let's just say eth section cool so our eighth section um is going to include a lot of like styling so uh in this example I'm just going to go ahead I'm just going to copy and paste everything that I have from uh my GitHub repository just because it's it's very tedious and repetitive to continuously be doing this and there's not a lot of um stuff I should say like in regards to it it's just a lot of repeat content is what what I'm trying to say so you don't necessarily need uh to really be focusing on this right now all I've really done here is I just had two big boxes one says try the number one software I imported a logo that I downloaded from logo ipsum and then I just have underneath here a border with uh just some more text and stuff like that and then again another smaller image so yeah if you want to go ahead and want to just check out how I did this one it's all in source code then in the last one we're going to go ahead and create a footer so let's cre footer and then let's say page. TSX and then we can do sfc and say footer and then tap tab div uh let's do div oh my God it's capping it's all caps again let's do div let's just say footer and then same thing here I'm actually going to go ahead and uh actually yeah we we let's build this one up why not so instead of I mean footer we can just go ahead and just say div not div what am I doing it should be a section so let's call this one a section and then let's call this one let's say class name let's say hidden MD Flex Flex call let's say py20 let's say justify between let's give it a background a it's a little bit different so it kind of stands out uh background is going to be bracket number sign 3 a 3 a not 3 a 3A but 3 a 3B 3C it's going to be kind of like like a gray color cool uh let's do div let's do a class name let's do text Center let's do Flex let's do justify between let's do px80 space X20 and then let's make the text all white now the next thing we can do is we do div class name we don't actually have to have anything there we can just say at uh wherever the at symbol is uh I'm just going to go ahead and copy and paste again why not so again uh I don't know what symbol this is but if you want to just it's here um I'm going to go quickly to our project it's this one that I'm referring to right here so you just go ahead and copy and paste that and then uh paste it into vs code and you'll see it cool so then outside of that one we're going to go ahead and we're going to have a t terms and conditions so we can say div let's just say terms and conditions and then let's say div let's say class name Flex space X2 now we can go ahead and we can go ahead and add in our uh like logos and stuff like that so let's say div let's do class name the background to be all be black let's say p-2 let's do a rounded full and then let's say uh our Twitter is going to be linked here class name and then we can say text white and also let's just do H6 so H6 height uh no H6 with six um Twitter oh it needs to be imported correctly so make sure you import Twitter from Lucid react and then it's going to go away so Twitter and then yeah we can go ahead we can do this let's do this three more times so perfect and then instead of Twitter let's call this one LinkedIn again just make sure that you're reporting the icon from uh Lucid react so then let's do Instagram let's say we have an Instagram and then let's do a Facebook cool so uh I think you guys should know by now how to link this so once actually somebody clicks on it uh it will pretty much all you got to do is just change this to a link and pass in the hre uh or like the URL to the website or the page so yeah I won't be doing that now uh just because you know take too much time to really add in all this stuff so yeah we really just focus on the fundamentals and kind of growing from there uh but yeah of course go ahead and send us in your stuff show us what you guys have done or taken inspiration from uh and that that's always like awesome to see so then from there we need to go ahead and we can't view our footer because we haven't imported it so let's go back to our page. GSX and then this will kind of conclude our landing page so footer and then let's go to our sauna and then you can kind of see that oh so actually looks really bad uh let's go ahead and figure out why so our footer the first thing we should do we got hidden MD Flex Flex call padding correct justify between text Center Flex justify between px80 space x1t text white and then I'm going to have oh so this is what it is so again another time where I've just closed the div way too early uh in this example so I'm just going to do div here above the section and then you're going to see that it's going to look good scroll all the way to the bottom and boom perfect you now have a footer so I think that's going to conclude our uh startup landing page uh just for part one of the video uh in the next kind of series we're going to be working on the product page as well as the contact sales page uh as as well as building out a pricing page so yeah so if you got to this part that's awesome uh let me know like what parts were confusing for you guys or what parts you guys are still unclear about and I can always go ahead and you know reply in the comment section as well as make some other videos um but yeah that's it for me for right now let's uh let's continue uh into the next part okay so let's go ahead and let's continue building from where we left off uh and that was our footer uh and let's go into so what we should be looking to build out right now is our product page uh and then our like kind of completed version of our project we have that uh demonstrated here so what we need to do is we need to go into our nav bar and we need to change one of the values to redirect to our like our product page so in our navigation menu bar let's click into that and then where it says features we're going to have product demo and community so we can go to where it says getting started and we can call let's call this one features let's rename it and then we can go into where is our we just need we need to find out where it says introduction so let's try to find introduction so we can just search that up introduction okay so title introduction this is where it is so let's change this to a product and then instead of going to docs we can go ahead and we can change it to a product as well so now once we go into our project we we're going to have product here and let's click on it and then of course our Pages do exist so we get this air which is fine but that works perfectly for me uh and then instead of saying reusable components built using radic UI tail and CSS we could say learn about the product and its features and then let's go back let's see how that looks features okay cool now we can also other make some other changes to this we can say instead of chat CI we could just say bird software again all this text is filler text that you can go ahead and change um to be your own let's see um and then yeah so what else do we have oh we also have a logo here so let's go ahead and let's say logo let's import it and let's see what this looks like and we have our logo as well so we have it there as well as here okay so product let's click on to product and then we're going to get the same air again so what we need to do is we need to go into our app and we need to create create a new folder so just make sure you're an app create a new folder we need to call it product then we're going to go create page. TSX and then we're going to say sfc and then we're going to say a product page div and then we're just going to say hi this is the product page cool so now once we reload it it's going to render what we typed so as of right now that's perfect and we can go ahead and pull up our product page so let's go to Features let's go to product and then we can start using this as reference uh for what we're looking to build the next thing I want to do is I want to take move this and then I want to have um we need to start building out our product product page so let's do give me one sec here product okay so to start this product page um one thing that you'll notice that is different is our nav bar uh is different um so we can go ahead and we just import that right away so we can just go and say um import naar so so let's go back to our project and then we have our naar so the reason why I wanted to break everything up into like separate files or folders uh is the simple reason that if you go to the AA website you'll see that when you actually you'll see you'll have this one nav bar right the one that we already previously created for the landing page but once you go ahead and you go into the actual product you'll see that the nav bar changes color so now it's only white instead of what it was previously so I kind of wanted to do the same thing here so instead of having this landing page Navar we're going to go ahead and create our own Navar inside side of our product and then that product is going to we're going to use that one instead so let's create a new folder let's call it Navar so Navar and then same thing as last time we'll do a navb bar. TSX and then we'll also have a components folder so we'll have components and then we're going to go ahead and actually to make to simplify things we can go back into our landing page essentially you can just copy this let's just copy the AV bar uh let's delete this one move to trash go into our product and then just paste it so now our product page has its own navbar it's all the components that are previously there and the one thing that we want to change is we don't want this one to have a background so let's just do background there and then now we we're going to have um a nav bar that's going to be apparent so let's go back into our page and so instead of importing from landing page uh I want want to import from the nav bar uh in our project so nav bar and now let's see what we got cool so you'll see that we now have a nav bar and it's pretty much the exact same thing the only difference is that there's no colors uh cool so that's that now let's go ahead and we can actually build out our first section so go into your product uh create a new folder create a first section so this one's going to be the first section inside of our product page so that's the kind of the way that I've mentally divided everything in my head let's go to page. TSX let's do sfc oh sorry about that let's do sfc then do product page let's do div and then let's go ahead and let's just oh not product page what am I doing here sorry I'm going do sfc and I'm going to do first section sorry about that div and we'll say Hi and then inside of our product page we can go ahead and we can import this so we can just say first section and make sure that we are importing it from slfirst section SL page and then you're able to see that there cool that perfect so we should go and continue building out the first section so in this one I want to do div again caps to div class name I'm going do a flex if it's medium siiz screen I want there to be a space 20 on the x axis I want to do py2 space y10 items Center justify Center and then I want to create another div here do class name I do space y-10 do Flex call Flex withd one over nope MD with one over three sorry about that do px10 uh we can actually just remove this one but let's just keep it whatever it's fine it's not going to make a difference class name text 6L 6xl and we want to say the number one software in product and project management cool div again let's do this let's close this let's close this div let's say class name text to XL you'll say bird connects close this also uh we could just copy and paste to be honest let's just do that save us some time here so all I'm doing is I'm literally just copy and pasting what I have here cool um now we can go ahead we can go outside this div and we can say class name Flex space X4 and then we can say div class name BG black p-4 text white text XL and say rounded MD let's say get started cool now outside of this one let's create another div let's call this class name border p-4 text XL rounded MD and then this one's going to say uh view demo and then to make things a bit easier we can put these on the same line cool uh outside of this div I want to go ahead and I want to add in a image so let's say image I need to import the image first so let's see if we get the autofill we do cool let's do image and then we can say width height we're going to need an alt and then we can just close it as well so images I want to do have I want to do my sixth one that I have you can use any of yours if you have any I want to do 700 and then I also want to do a class name of px10 class name name equals oh I already have the class name there so I can just go and I can say px10 okay cool so we have our image now so that's perfect and this is what we have in ours awesome so I mean that was our first section done it's pretty easy pretty simple uh we can go ahead and we can go to our second section now so same thing let's go into our product again make sure that you're in the product one and we're going to go second section and then let's do a page. TSX and we can say SF see second section say name and then we say hi this is the second this is the second whatever it doesn't matter because we're going to change it anyways go back into our product page and let's just say second section Okay cool so what we're going to be looking at building now is this component right here so let's do that now second section so we're going to go and immediately uh just import the image because we're going to need it import not import image from next image and we can say class name py d10 I'm going to close this I'm going to make it a little bit more visible for you guys to see P y-10 let's do space y10 items Center justify Center Flex Flex call and then I want to say div oh I got two arrows there let's close that do class name text 5xl and then I want to say wierd again let's just keep this consistent with the one line let's do div class name text 2XL text Center and then we can say according to x business it doesn't really matter what this says here um let's just do whatever the auto 79% okay that's really long I don't want to do all that achieve Revenue growth let's just add this end it's there again this is all gibberish you can go ahead and make your own fake stats uh but yeah this is just some random thing that I found cool so outside that div we can go ahead and create another div we can say class name MD Flex space y-10 MD space y0 say MD space X20 and then we're going to say text to or not to XL but just XEL then we're going to say div uh looks like I forgot to close there it's fine class name with 80 and then we're going to say text Amber 300 and then we're going to say border p-8 rounded LG div class name Flex item Center space X2 and then we can say put this in another div uh and then we can just put an image in the div so actually we could just do without it's fine I wouldn't make a difference let's do oh sorry let's do image uh I don't want to use that that one I have sorry so I'm going to go ahead I'm going to use my own image that I found so again what I've it's going to render an error because we don't have this image so what I went ahead and I did is I downloaded a bunch of images that are completely free to use uh and I put them in this folder here that uh again is available in my GitHub repository so feel free to go ahead and use that because I mean it's all free images and it'll save you a lot of time on building this project and then once you're done the project you go you can always go ahead and just uh you know change them up as as as you go but I'm going to go ahead I'm going to copy and paste all of the the um what should I say like the icons that I have and I'm just going to use those so in my images folder I went ahead and I created another one called icons and I'm just calling the icons uh like for example this is what they look like and I'm just calling them to uh to be used so let's say if I refresh this let's see if I call it correctly okay I have not let's try to figure out what's going on so inside of my images inside of my icons I have a light bulb so this is the light bulb right here and this is the one I want to call so I think it's because it's maybe it's too small it's not being visible let's check 250 250 and then I want to call class name I want to do H20 with 20 let's see see what that looks like okay yeah so that's what it was I just didn't have the sizing correctly but there you go we have our image now uh and it's being rendered so that is the same image that we have here as well so let's go ahead let's continue and we can say div class name text 3XL we can say 82% plus sign and then that will indicate like our statistic and then we can go ahead and we can close this div here sorry we can close a div like this and then we can say div uh should should be one more actually here let's close I didn't that's fine yeah so div class name uh all I'm trying to do right now is I'm trying to make it so that the image and this number are like in line with each other and then I have like the text underneath so I'm just looking at the styling that I have above uh but it'll all work out the same so it's fine so div let's do um pt-4 and then let's say with 80 and then we can go ahead and say increased creativity I don't know it can be really anything you'd like I'm using a light bulb so that's why I put creativity I was thought I those two kind of go hand in hand together but yeah I mean essentially that's the one there uh I'm going go ahead I'm going to bring this down and then we can go ahead and we can just repeat this um like three more times so go ahead and write where it says with 80 take that and then use the div all the way to the bottom it will highlight which one it's corresponding to and then you can go ahead and you just paste that two then I also have it three more times so let's see what we got and perfect so we have our um exactly how we have the layout exactly how we want uh and we can go ahead we can just change images now so so the second one I had um let's just make up where is our second one I believe it's this one nope that's the first one second one so I think we had like 37% let's do increased on time comp completion and then I'm going to go ahead and change it instead of being a light bulb I want to use the clock so I can do clock okay and now I have that there so let's do that and then we can do uh again it can be any number let's just do 41% increased productivity and efficiency then we can change that one to um I believe we have like refresh icon so that looks like that we can also just change this one to blue and then we can also just change pretty much yeah and there you go so you now have that there what does the clock one look like again the text on the clock one is just black okay so wherever the clock is let's just remove this and then it's just going to like Auto default to Black okay cool and now we just need one more so what else do what else what other one we missing um a happy clients okay so let's do the second one here uh I think it was a check mark let's check what we called it um yeah I call it check mark so check mark and then let's just change it to Green okay and then we can just call this one and we can just say happy clients and say 400 or something I don't know 2,000 something it doesn't really matter what it is let's check ours out and perfect so we have everything um kind of working properly here and I mean that's a really good start so I think that's the that kind of concludes let's check what it looks like on mobile just real quickly so another thing you'll see here is our Navar we have an issue with it not um you know being over top right we want this thing to this to go underneath so let's try to figure out why that is uh let's go to our Nar inside of our uh Second and let's see let see why that is let's go back to Z X20 and we can go to our let's say first section interesting yeah so that's another bug that we have to uh kind let's see what happens if we just remove this and then sticky as well yeah I mean that's fine right like we can just we don't have to have it uh always be let's see quickly if I do sticky that's fine okay I'm I'm content with that uh so it was like a slay bug that I had that I missed up until now but essentially all it was was it was saying if I go back U you see how you have like the nav bar following all the way along uh for some oh actually this is a very simple fix what am I talking about um this shouldn't be the BG of this first section uh ah it's fine whatever we'll just continue from uh there on but okay yeah so I figured out what the fix was uh and it was in fact that we did not include a BG value here so make sure that when you're in your uh app product navbar navb bar. TSX you have a BG value um and then that way you're going to see that when we uh scroll uh the issue is going to go away so originally we didn't have anything like this we had just this and then you're going to see how once we refresh the page you're going to see how it kind of becomes like too it's transparent and then it doesn't work so yeah so just make sure you have that there uh and then you'll be good to go so awesome that concludes this section here uh so let's go ahead and let's build out our third section now so let's go to product not new file let's go product let's go third section and then let's do page. TSX so page. TSX and then let's do sfc third section cool then we're going to say third section now let's go right away into our product page and then we can say third section make sure it's imported from3 section SL page now once we go ahead and we scroll to the very bottom you're going to see that we have third section right there awesome so we can go ahead and we can just start building from there what we're going to want to do is we're going to want to have a essentially let's go so here it's very similar to what we had on the landing page where we have the tabs that we navigate through uh this is going to be a combination of the accordion um from shaty Nui as well as like an array of values so we can go into our third section and then I can go ahead and just import uh everything that we're going to need so the very top of our function let's go and let's say use client and then we can just import all these values so these are the ones that we imported from uh the landing page uh just make sure you have them here as well now what we want to do next is we want to go ahead and create an array and then the array is what we're going to Loop through the data uh and then that data is going to be the one that's displayed so I'm going to go ahead and I'm just going to use the one that I've uh put in the GitHub repository just to save us some time so that we don't have to spend time you know like filling out texts and like strings and stuff like that so let's continue from there and then the next thing that we can go ahead and do is actually just start building this thing out right away now what I want to do is I want to go so we have our array here we have our objects and we can just say class name py d10 space y-10 items Center justify Center Flex Flex call then I want to go ahead and say div and do class name text for Excel text Center I'm going to say built to support any team and workflow and then let's keep this in line then underneath we can go ahead and say div say class name Flex space X10 and give them like a space between each other uh padding X10 say items Center let say justify center now inside of here we can say div just an empty div with an empty class name the reason why we need this is we need this to be a column uh to have the effect that we want to create so now let's go ahead and let's Loop through everything so let's say options. map option and then we can say uh index as well or we can include the index and then we can say say accordion I'm just going to go ahead and add this quickly so this is our accordion so make sure you have accordion index type equal single default value set to marketing that way um this is the value that is opened uh no matter what then the next thing we can do is we can actually just uh again I'm going to go ahead and use the code that I've written in the GitHub repository uh just to save us some time so uh we don't mess anything up and also we're not going to be uh wasting you know time that we could SP spent be could be spent developing on other more important things so now once we go to our ASA we reload it we're going to have our the exact thing that we wanted to create so you now have the marketing thing that's open you have operations product and then you also have sales so if you got to this point it means you've done everything successfully um again make sure you check out the GitHub repository to save yourself some time uh and then you can go ahead and worry about uh changing the text and stuff later awesome so let's see what this looks like uh one thing that you'll note um is I've also made this non- collapsible the reason behind that is it's a prop that you can pass to the accordion so here you can say collapsible and then this will make it so once you click it it will close um I think the reason the reason why I left this out was because once you close all of them you now have this issue where um like you get that effect right there and I didn't want to have that I wanted to always have the same width like B consistent throw and then as the customer or the user client whoever comes to the website website uh can go ahead and see all of the options be available but yeah if you it's something you like um you can go ahead and always just put collapsible but yeah so you can't close them uh which is what I prefer but if you want to make it closable just add in that awesome so that's the third section now let's go ahead and let's build out our fourth section so let's go to new folder let's do fourth section and then let's do page. TSX sfc 4th SE section div and then we can just say fourth section let's go back into our page. TSX for our product page and let's import our fourth section fourth section and again it's going to be from slash fourth section cool um let's go to this one is going to be our fourth section is going to be this component right here which is very easy to do so we can do that pretty quickly awesome let's go back into our for Section cool that looks pretty good and then we have our four section at the bottom there awesome so let's start coding this out uh four section let's do same thing we've been always doing which was the padding y of 20 so class name MD padding y20 padding zero if it's a small screen or padding on the Y AIS be zero on a small screen space y20 so we can space everything out items Center justify Center and we can remove our four section we don't need a text right there div let's do div class name text for XL text Center then we can just say the best platform for cross team work now I want to do this and I want to say class name MD Flex so on a large screen I want to be visible mx10 uh we also need that here as well so mx10 then let's do items Center px10 then adjustify Center so inside that we can go ahead and create another div we say class name and then this is going to be our background gradient so we can do BG radient to the right you going to have it go from the left to the if you want to go to the bottom or to the top uh it's going to be B and then T and also L for left so I'm going to be consistent with what I previously had which was to the right and I'm going to say from Gray 400 uh you need to have a dash in between each of these letters and then you're going to say two gray 100 items Center justify Center rounded rounded MD and then Flex as well as p-10 cool now let's import our image so image import image from next image and then we can go ahead and we can say uh I'm going to go ahead and just copy paste this here so let's add our image uh we have know we've set some styling as well so I'm pointing it to this one now underneath this one I want to go ahead and want to say div I want to say class name Flex items Center justify Center padding y 6 MD uh width is going to be2 next thing I want to do is I want to go and I want to add in another one which is going to say div going to say class name text 4XL going to say Flex I'm going to say MD space y20 space y10 flex call and now I want to say another div here uh just going to say class name Flex call uh the flex call class is already preconfigured by T1 CSS like by default you don't have to put this butt just to ensure that this is going to be a flex call I want to just say quickly uh quickly connect complex work across teams awesome so then underneath this one I want to go ahead and put another one div this is going to be another one it's going to say div it's going to say class name text 2XL then in there I want to say decrease duplicate work and increase cross team Mo my visibility momentum yeah anything really will work doesn't doesn't necessarily have to be too fancy now underneath this one I want to go ahead and I want to say get started so class name I just want to say padding -6 I want there to be a border I want the width to be 40 or a Max of 40 I should say a border withd 40 arounded Exel and then text Xcel as well and then this one's just going to say get started cool so that should pretty much be everything for the for Section let's go ahead and check it out and it is yeah so we have our the best platform for cross teamw workk as well as we have our image with uh the text as well here so that's awesome now we can go ahead and we can go create our fifth section so product create a new one fifth section and our fifth section is pretty much going to be an exact copy of what our forward section is however we're going to rotate um like the column so the one on the left here the one on the right here will be on the left and then vice versa for the image so we'll do sfc fifth [Music] section div and then we're just going to say fifth section cool so just so that we can see what's happening in real time let's go and let's import our fifth section awesome so our fifth section and then if we scroll to the bottom we can see it again so yeah uh pretty much what we want to do is we just want to copy and paste our for Section so let's go to app contact not contact product let's go to Fourth section and let's just copy and paste the entire thing so go back into our fifth section and then I want to go ahead and I want to um fourth section yeah so we're in our we're in our fifth section page and let's just change this back to fifth section so fifth section we can go ahead and copy that and then we can add it to the bottom here so we have our fifth section now the next thing I want to do is I want to change um let's see what we got going on here cool so we should have two exact ones and we do uh and all I want to do is I want to change um like pretty much I want this image to come after so to have that all I got to do is take this part here so underneath this div and then I'm just going to go back to here as well all right cool and now underneath I'm going to go and say this and now I'm going to have the opposite which is what I wanted so let's check it out cool so we now have our text at the top we have our card or our column I should say and then we also have um all of the the stuff related to what we need so we can go ahead and we can just you know copy and paste this text from our finished product um that way we can just you know get stuff out the way so let's see let's see what we got so decrease uh I want to say this and then I also just want to get rid of this as well so let's see part uh work make work easy or something maybe work easy to find and share really anything okay that works for me yeah so as long as you kind of understand like what's going on here of course you can always go ahead and change um what the content says or what it's doing um and then so on and so forth so yeah that looks good to me uh as well as change uh change the image related to uh that specific page so instead of this one maybe make a tab three or four or whatever other image you have you can kind of see what's going on and then we go into our like a screen let's just check that looks pretty good to me so again that is our finished copy I'm looking at the wrong one we want to look at this one here okay cool sorry about that but yeah here we have it um one thing I noticed is we don't actually have any padding on the best platform uh these ones right here so we can go ahead and just add that really quickly so the best platform to so all we have to do there is you just have to say px10 now uh it's it's centered as well as it's away from the corners which is what we want um and then I want to do the same thing with this one so back to our fourth section wherever it says the best platform uh we just do px10 px10 cool and now it looks like it fits the screen properly cool so and again let's maybe we'll just different differentiate a bit so we could say instead of the both having the same thing we can just say we could say our customers are bettering a better world with birds sure something super dramatic like that also works why not um Okay cool so let's go ahead and let's continue and let's start building out the sixth section so go over to products create a new folder call it six section and then let's go and let's say page. TSX sfc 6 six section we can just say hi cool now in this section all we're looking to do is pretty much just create the the logos again uh let's go back to our finished copy this was going to refer to our six section this is a very simple one so we can get this out the way pretty easily uh again again we can import our image right away because we're going to need that so we just say import image from next image and then here we're going to have a number of classes so let's do that class name padding y 20 MD space Y2 to space everything out a bit item I want them in the middle and then I want to put them in the center as well so Flex Flex call then I want to say div say class name text for XL text Center PX 10 and then going to say 80% uh of businesses uh sure 80% of customers increase their revenue within 6 months of using bird sure why not let's uh let's go ahead with that uh we go ahead and just close these divs out we don't need them um and then let's continue building out so we're having a little cool little glitch there now let's just say div say class name say MD Flex on the medium side screen I want it to be going across like in a row I want to say MD space X20 items Center justify Center div class name I want there to be a border on the bottom and then when I on a bigger side screen I want it to be on the right hand side and then I want on a medium size screen I want the border on the bottom to disappear so border B zero and then I want the maximum width on a each like side or each logo to be 80 so I'm going to go ahead and just copy and paste the images that I have and then you can go ahead and add in a number of them so let's take from here to here and let's just copy and paste it uh three more times so one two three cool so now we have four we should have four four images and let's check out what it looks like I don't believe we're going to be able to see it cuz we haven't actually yeah we haven't so we haven't passed our six section to our page so let's go ahead and do that sixth section and let's see what we got so now I go to the bottom and that's awesome so we're able to see all the images that we created and if we go to the smaller size screen we can go ahead and we can see that we have the Border appear on the bottom as well as we have the text centered so I mean that's super good uh now all we have to do is just change images to be a little bit different right we don't want the same image every time so let's make this one for me it's the eighth and then this one I think is the fifth one then I don't know maybe we could do like a third one let's see what that looks like okay this image on the end here looks a little bit crazy so I might just pick another one let's do a fourth one let's see what that looks like oh okay same thing yeah really uh I don't know maybe nine let's see that okay yeah that looks good to me um I'm happy with that now let's go ahead and let's check out what else we have to build so now it's going to be our features uh kind of section and then we're going to we already have these two actually these three built out uh I really I guess you could call it to so we had this one on the bottom with that we here so these ones are going to be easy to do so let's go ahead and let's build out this seventh section now uh we have kind of kind of already talked about how we're going to be doing it or with previous uh sections but uh this one will be a little bit different so let's do seventh section and then let's just do page. TSX sfc 7 section and then I'm going to click tab tab tab div and then we're going to get my seventh section I'm going to make sure to import it right away so that we can see the changes happen seventh section and then I'll go to the very bottom of my project and then you're going to pull it up but yeah so here I have my seven section right there cool so let's go ahead and let's actually build this thing out seven section now all I got to do is here so we're going to import our image right away so we can just say import image from next image then we are going to have a number of classes for this one but it'll be pretty easy considering like uh we've already kind of done stuff like this it'll just be a matter of putting it out like an image with some text and then kind of having that be displayed in rows uh and I'll kind of explain more here so for the div we just do class name uh Flex call Flex call and then in here we're going to say div class name padding y of 20 space y 20 I'm going to close this so you guys can better see it uh items Center justify justify Center Flex Flex call I want to give it a back a special background color so uh let's do the number sign as well and then we can say E5 or E Yeah E5 e no E Yeah E4 E2 close that and now we can go ahead and say div again caps killing me here div class name text for XL MD width is going to be 40% text Center we're going to say robust features to achieve any business of objective as your company as your team scills sure that works I'm going to go ahead I'm going to make sure to remove this div uh and then I can actually create a new div here a class name uh I'm going to say space y-10 do MD space x40 space everything out and then I want to say MD Flex MD space Y is going to be set to zero and then I'm going to uh m d space I think I went too far back there two space y z yeah so that's correct and then here I want to say div class name Flex Flex call width 96 so I want to set it to then I want to do space y-4 and then I want to say Flex okay so I have flexx and flex call that's fine so I just need to do Flex call there oh with 96 Flex yeah Flex call Flex that's fine now let's go in our import our image so import the image so SRC uh can be anything so we're going to change these to be a bit different in a second I'm just going to go through the autofill all right and I'm going to close this so cool so this one's going to be the height is going to be set to 20 and then the width is going to be set to 20 and then I'm also going to change this to the 300 300 and then I also want this to be an icon as well so again make sure you checked out the GI up repository uh for to use the same assets I'm using but yeah there's some good ones in there and they're entirely free to use so why not use them right okay cool so we have our gear icon there and now we just have to build out the rest of uh kind of the text so let's say div let's say class name text 2XL font semi bold and then I want to say drive cross team efficient not EG not egg but efficiency and then I want say div again div class name margin left to be sixth six pixels I should say uh and then space y-4 now I want to include my all my text so I want to say I want this to be on the same line so it's easier to read class name text um actually we could just say text XL here so that'll be save ourselves some time so instead of preconfiguring all these just say div and then we can just copy and paste all the texts that we want so I'm going to go ahead I'm going to put this here and then I'm going to pretty much just do that for the so I'm going to just take this one copy it paste it paste it again and then I'm just going to change the text as I see so this is going to go here instead and then here I'm also going to say this one as well cool now let's go ahead and let's check out what this is going to look like should be awesome I mean that looks pretty good to me uh I think it really illustrates what uh I guess we have the font bold here uh why is that we don't want it all to be bolded we just want the one to be bolded so I'm going to go uh that's why I forgot to close it here so div now only the the title should be bolded yeah and it is so yeah just make sure that you are closing this uh font semi bold uh till have this Tex be bolded now essentially all we have to do is we just have to copy and paste this two more times so let's go ahead and let's just take where it says space y-10 um all the way down it will highlight which one it needs to be um copied to but you can just take this one here and then you can go ahead and put the other one as well so and now let's check what we got so these are all Flex calls which is not what we wanted um let's try to figure out what's going on here so space flex calls Flex Flex call I want to go ahead and I want to remove let's make this a flex okay that didn't work either what if we just remove this entirely okay so that also didn't work we need to um on a medium siiz screen are we it's a flex um let's see let's see what we can do is we can go ahead and we just create a div at the very top of this one and then we can make it a flex like this so underneath here underneath here and underneath here so two from the bottom we can go ahead and we can force this to be a flex we can say class name you can just say Flex let's see what we got now and that works perfectly fine for me so yeah so pretty much all we're doing there is we're just saying that these just curious as to why um these something might just not be closing correctly um it's fine uh we don't let me see if this is flex Flex call essentially all we're having here is it's not like an issue per se but we're just not having it uh render correctly which is fine uh say space x40 and yeah it spaces out let's just quickly reload everything make sure we don't have a caching here then if we go here um so when we're going down yeah so when we go to a small size screen it's meant to be a flex so we're going to say MD Flex on MD not MF sorry MD and then if I go here okay so now it's appearing uh we just have to figure out MD space it out like this and then we can just say space y-10 and then if we go to yeah so essentially you can just take this class here and you could necessarily you could just reapply it here it's very very interesting I don't know I don't know why this is uh let's see yeah okay so it could be a mistake on my end there but pretty much just apply that class and then you can remove from here as well because it's not actually doing anything awesome all right so that kind of concludes let's see if we back all right awesome so now all we pretty much have to do is uh just copy and paste this over again uh and instead of just doing it once we just have to do the big the the one including all three so where we just wrote that class right there so underneath row bust features find this div and then it will highlight which one so again third one from the bottom we can go ahead and we can just copy and paste all this again so we can say underneath here let's just redo this one and let's paste it and let's see what we get and again you're going to get the same thing over you're going to kind of duplicate it uh and let's see perfect so that works um fantastic and now we just have to go ahead and kind of restyle this thing so let's go through each of them and let's make it work so okay so where we have drive cross team efficiency um that one works pretty good now we need to do the next one which is uh down here so we can say automate processes we can say we just copy and paste all this text to be honest with you uh let's just go back into our project um Okay cool so we can just take this copy this um again make sure that we're copying everything correctly and yeah I mean this is pretty much just a matter of time like going ahead and kind of making things your own uh the next thing I want to do is I want to change this icon to be a puzzle icon um and then here I want to do get real get real time updates or insights next I want to do this so let's do that build and then let's do this got two dots there uh template Library cool and now we can go to um this icon I think it was called a refresh yeah I think it was yeah refresh -2 and then we can go into the next one this one is just going to be a lock icon then we can just say Protect sensitive data yeah so this would be a great time to kind of pause the video uh and really kind of review what we've been working on and then you can go ahead and you know make your own changes to everything uh as you see fit manage resources okay so that one is the same already it's fine then we also have this one so protect sensitive data manage permissions and settings all right cool so I think we can pretty much just wrap it up after this one so yeah let's do that let's do contacts and then I'm just going to SC skip to the bottom and I'm just going to say uh whatever the the last one was so set goals and alignment and then whatever the icon was so menu you can go ahead and you can fill out the rest of this um but let's go back into ours and let's see what we got so we now have our um you know updated features that looks looks pretty good to me I kind of talks about so uh the features of the again the product in our product page uh and yeah I mean it looks pretty good so we can go ahead and we can conclude that one and now the next thing I want to do is I want to uh Implement our eighth section again so our eighth section has already been completed uh in our last page so we can go ahead we just copy that so copy and then let's go into our product and let's just paste it so we now have our eth section and then this is pretty much the exact same thing so let's go to our page. TSS X um and let's import our e section e section and then you can go ahead and view it so give it a second to load scroll to the very bottom and then you're going to see it again so which is what we already created and on the landing page it's going to be the exact same thing and then we can also do the same thing for the footer so let's go ahead and let's copy and paste the footer so copy from our landing page go into our product paste it and and then we can go ahead and we just import the footer so footer and then make sure it's from slf footer page and now once we go to the very bottom again you're going to see how we have a footer perfect so that concludes the end of this uh I guess page you could say uh and the next part we're going to go ahead and build out the pricing but yeah I mean that looks really good to me and if you're wondering why uh the footer is not uh like appearing here is because we've disabled it on a smaller screen so that was done by this class right here where it says hidden so if we remove it you'll see uh it will come back but it doesn't look good so I just removed it cool let's go ahead and let's build out the pricing page so the first thing I want to do is I want to go ahead and I want to add a pricing page to the top here so I want to go ahead and go back to what my main section is and I want to go to my Navar and then navb bar. TSX and then where it says navigation menu bar I want to go ahead I want to create a new page so where it says pretty much the same thing where you see documentation I want to go ahead and copy and paste a new one so navigation menu go ahead copy it and I'm just going to put a new one and I'm going to say pricing now let's go ahead and see so we have our pricing right there um and yeah we can make a link to our pricing page pricing Okay cool so so now we have to do the same thing as we've always done which is create a new folder inside of our app so let's call it pricing and then let's call a page. TSX and then we can go ahead and say sfc pricing page tab tab say this and then you can just say pricing pricing awesome so now once we go ahead and we click our pric you're going to get redirected to our pricing page where we have created a function and then we've also called or we've entered some text called pricing so let's go ahead and let's build this part out what we're going to need is we're going to need Navar as well so let's go ahead uh just copy and paste and nowb bar from not our contact not not our landing page but our actual product so copy go into pricing paste it and now instead of calling this one pricing let's just call our nav bar as well so nav bar cool and now you're going to have our nav bar as well so everything like that is working so the next thing you'll see is you'll be like well where is our pricing page right um and that's because we have two separate nav bars right we have the nav bar that we created on our landing page that one we have set to be redirected so again we're going to make sure that we have a pricing inside of this nav bar as well so let's go into our nav bar and then let's go into our navigation menu and then again where it says uh documentation we want to copy that one again and then I want to do this as well so let's call this one pricing and then we can go ahead and we call this pricing so that way once we go into let's say our pricing page we we actually have another one called pricing as well so U of course it doesn't necessarily matter because we're also on that page but it's just nice to be consistent and also make sure that Pages uh are not like disappearing depending on what page on right that we want to have everything be apparent okay so let's go ahead and let's do this now um where is our pricing okay so pricing we have our Navar page. TSX and the next thing we want to do is we want to just create our first section so let's do that so create a new folder inside of our pricing called first section and then I want to do page. TSX the next thing I want to do is want to do sfc and I want to do a first section and then I want to do div and then I want to just say and just say hi I want to go immediately into our pricing page so app pricing page. TSX I just want to say pricing uh not pricing page but I just want to say uh first section cool so we've imported it and that's good to go so we have our High there let's go into our first section and let's import some stuff right away so we can go ahead we can say use client because we're going to be using um a a use effect or a use State later you can say import I want to say calendar days from Lucid react and do calendar minus and I also want to do a check all from lucid then the next thing I want to do is I want to say import I need to import react from react as well as a use State cool so here uh in this page or we are going to set the function to be able to uh kind of flip between uh pricing right because in our final project depending on where we are uh if we're doing monthly or yearly we have some values that will be updated so I'm going to go ahead and show you how to build that now so first thing I want to do is I want to create some states I say const is a monthly plan monthly plan and then I'm going to do set is monthly plan and then I set that you state equal to true and then I'm going to say const toggle plan and then I'm going to say equals Arrow function and I'm going to say set is monthly plan to the opposite so the reason what I'm doing what I'm doing here is I'm saying if it is the monthly plan uh pass in the opposite right because I I want it I want it to do the opposite thing so uh this will make more sense later but yeah pretty much just make sure you have this here then next thing I want to do is I want to say uh div um if I'm not mistaken we might actually not even need this yeah I don't think we even need this we can actually just delete this yeah sorry that was an overset by my Aspire originally what I had was something that maybe included it but I I left it out so Flex Flex call space y10 padding bottom of 20 and then items Center justify Center say div class name space Y6 Flex Flex call text Center padding 20 of uh padding top of 20 padding X of 10 MD px0 div class name text Gray 800 text XL it's all caps I'm going to say pricing and then I want this to be consistent so pricing div again I want this one to be on the same line class name text 5 XL and then let's just say easily organize your work start free then I want to say div class name text to XL and then I want to say text Gray 500 and then I'm going to say access birds features no credit card required cool now we are going to check and see what that looks like all right that looks pretty good to me um yeah let's go ahead and let's keep building on that so underneath this one we want to go ahead and uh create some new divs so we want to say div I want to say class name make it Flex so I want them to be aligned on the x-axis and then I want to say px-10 MD px0 then I want to create my buttons so I want to say button class name and then again I want to use um the curly bracket I want to use a back tick and then I also want to use the dollar sign and then I also going to use the back uh like the curly bracket again so I'm going to say is monthly plan so I mean we've already kind of got uh the autofill work in here but I'm going to go ahead and type this out instead so monthly plan so we're going to conditionally render the classes based on the value so BG blue 500 and then we're going to say text White then I want to go ahead and want to say if it is not like the monthly plan we can go ahead and say BG gray 200 and then text uh 800 then I want to go ahead and where my where I'm closing this I want to to say want to close here and then I want to say p-4 I want to say rounded l LG and I want to do Focus outline none with 40 and then I want to say MD is width is going to be 80 so I'm essentially just setting the properties um to be to be that so do that and then I'm going to say on click no so actually where we have this MD I want to end my classes right there so so close that close that and I'm going to say on click set is monthly plan to equal to true then I want to go ahead I want to say div class name flex and now I'm going to be styling the inside of the button Center justify Center and do space X4 then I want to do my signs that I've imported so calendar minus uh if you guys can go ahead and maybe apply buy some better uh icons here I really wasn't able to find like really anyone to indicate one for monthly and then one for yearly inside the the react one or the Lucid react one I should say but uh yeah you guys can go ahead and you know add in your own so div class name text to XL and then I want to say monthly um okay cool and then I'm going to close actually we already have the div closed there so that's perfectly fine then now what I want to do is where this div is here you're going to see that I have my monthly one now I want to go ahead and I want to uh essentially show my other um class here so I'm going to go to this one I'm going to take this button pretty much I have this little caching air here so it's going to go away okay and it does pretty much all I'm going to do is I'm going to take this button and I'm going to copy and paste it so I'm going to say the inverse so I'm going to to differentiate this one I'm going to space it out but pretty much I just want to apply the opposite styling so if the button is not the monthly plan you're going to see that now this is the styling that is um being selected so BG gray padding dash for this is correct instead of the L we want the r then I want to say um that's correct and I instead of setting monthly is monthly plan to true I wanted to set it to false so I think now we have it where you can flip between the two um and you can display or the the classes will display differently depending on which button is selected so and then also we can go ahead and change this so this one to be yearly and also this calendar sign can just be calendar it's fine calendar days I think it was called yeah all right so now that I'm thinking about this actually we could have probably called this class name something a bit better we could have said is active plan I think that would actually make a lot more sense so I'm going to go ahead and do that now CU is monthly plan doesn't really tell me any like the user anything or especially um so let's just just say this is active plan set is and then I'm take this here so set is monthly plan and then I'm going to take this one cool and then I just take this again so all righty so nothing really changed like in terms of product product wise uh or like code wise but all we're saying is the active we just reset the state pretty much the state name was just a little bit confusing because again it was asking if it was the monthly but we also have yearly plan so it didn't really make too much sense okay so now the next thing that we want to do is we want to go ahead and actually build out these cards uh and we can go ahead and do so uh relatively quickly so let's do that now underneath this button whatever this the second button here nope this button cool we have this div we can go ahead and we create another one say div and then we can say another div and we're going to go ahead inside this one same thing we're going to conditionally render uh these classes so class name class name we going to do backtick dollar sign dollar yeah dollar sign um curly bracket going to say is active plan any question so if it is we're going to block and then we're also going to say if it is not we're going to hide it text Center so we also want to apply that here so text Center text 2XL now let's go ahead and let's see what that looks like so yeah they didn't do that didn't do much that's fine now the next thing I want to do is I want to I mean yeah we could actually probably just remove this because we don't we're not conditionally rendering anything based on classes so let's just actually just remove that it's fine again it's another oversight on my side uh we don't need that now we can go ahead and we can actually just start uh building out these um actual like cards so let's say let's go to here do div class name MD Flex We want them to go across on a medium size screen padding 10 MD space x 10 space y-10 and then if it's on a big screen we don't want there to be any space on the Y AIS items Center say justify Center MD with 3/5 mdmx Auto cool and now we can go and say div class name and say class name say border gray 500 p-10 rounded LG a border space Y8 and then MD U width is going to be one2 now we can say div say class name text to XL and then we're just going to say basic then I want to say tag div or yeah div class name text Exel for teams that need to create project plans with confidence then I want to go ahead and I want to say another div here and say div uh and again we can actually just show you what is going on so as of right now this is what we have so far uh but yeah let's go ahead and like div maybe I can move this to the side so you can see at the same time cool so we can do div uh and then I can also say um for teams that need projects we can do another one which is going to be the price so div class name there's not going to be any H yeah there is let's do text 5xl font semi bold and then we can just say us0 Okay cool so we have our that one right there and then we can go and put another di underneath say div div class name we can say um there there is no real there's no class apply this one I mean you can make it text empty if you'd like but it's not required per user per month build annually and then this one is 144 99 for example so this was something from the ass website that they had underneath each of the prices uh and I just went ahead and I copied it so yeah um now we're going to go and say another div we're going to say class name text Center and then I'm going to create a bun I'm going to say bun and I'm going to say class [Music] name bun class name BG blue 500 text white PX 4 py2 rounded LG text XL and I want to say width is going to be full as well and then in this one I'm going to say contact sales see what that looks like looks pretty good and then underneath this div here where we have text centered I want to go ahead I want to say div and then I want to say class name text to XEL underline text Center and then I'm just going to say purchase now cool so we have our purchase Now button and this is what it looks like in our final presentation so yeah we're getting pretty close to that page awesome so now I want to go ahead and I want to build out the list that we're going to be building out here so let's go ahead and let's do that let's go back to our application all right so we purchase now and then underneath this one we're going to go say div it's going to say class uh we don't need it again we can do text LG or MD sure say manage tasks and personal to do and then let's go let's let's make this on one line so it does not get too far down just reorganizing here there's nothing don't worry about this right now you don't have to do this but I like to just be able to conceptualize stuff a bit bit easier um and then I want to go ahead and say div class name Flex space Y6 Flex call then I want to say div I want to say class name say Flex space x 6 then I want to do div and then I want to do a check the check icon that we imported earlier so cool uh let's see what we got so we have our check icon and now we just need to apply the text so let's say div class name text Gray 500 and then we can go ahead and click say like timeline okay so we' reached like an interesting stage of the project pretty much all that really happens uh from here on out is we're just going to be copying and pasting all of the the code um that like from here um like pretty much this is all just going to be copy paste so I'm going to go ahead and I'm going to just if you want to go ahead and do so uh feel free to copy and paste from the um uh what should I say uh like the get a repository just so that you again you can save yourself some time so I'm going to go ahead and do that now so just going to take all this and then I'm going to just paste it in here so it's just going to say a bit of time uh so that we don't have to be spent like again just rendering strings and stuff like that awesome okay I'm going to remove this High also so we don't need that cool now the next thing I want to do is Let's see we now have so we okay so we officially have the one card right now all we need to do is we need to display the second card so I'm going to go ahead and and show you how to build that part out now so when you go from where it said MD this right here MD I had two dashes there we need to go ahead and we need to copy and paste this so I'm going to go all the way to the top take this part here and then I'm going to copy and paste it so again one from the bottom space space and then I'm going to see what it renders it looks like it renders out in a flex call which is fine however we need it to be a flex um like a flex Direction so let's go ahead and figure out why that is so this is going to be a similar situation to the last one where the very top let's do Flex not Flex call let's just do Flex okay no not that here we have so okay underneath this one we can go ahead and create a div this is pretty much the same solution as last time div class name Flex it's an easy fix uh and it is like very easy so also here and then to the very bottom of this one and go ahead and we just close the dip so now all we have to do is we have our flexx which is fine we need to just say Flex make sure it's only on a medium screen right because when we go to a small screen we want it to look like that awesome so let's go ahead and let's add in the next component so wherever underneath the last one that we just copied and pasted so three from the bottom take the div go all the way to the very top and then copy and paste uh or copy I should say and then go underneath it and then paste it and let's see what that looks like so we have extremely thin cards let's figure out why that is I don't think this will be too easy of I don't think this will be too difficult I should say uh to figure out so MD wi 3 over4 uh let's see what this is okay so just I went ahead and I just deleted the width here let's see what this looks like wherever so wherever I had the width of uh right here I'm just deleting that and I'm just going to try and see what it looks like uh and yeah I mean that looks pretty good to me now the only thing that we have to do is let's see yeah okay so yeah just make sure you delete the class that I previously had where it was uh basically setting the width to be 1/2 we don't want that to be the case here I think that looks pretty good like that and then if go back to our final project uh we have this card is a bit smaller I would admit all we can maybe what we can do is we can change the padding -10 to maybe be um let's see if we just remove the padding d10 okay that's from the we don't want to remove that part just want to go back to here but yeah okay you can play around with it you can make it uh really however you want um but I mean I think this is fine it kind of gets the point across now what we want to do is I want to go ahead and I want to render uh like so once I click on yearly and like the different prices I want to render different um data of course right because different plans are going to have different amounts depending on what their value is and then also if it's yearly or not so let's go into let's go outside of this one where basic because our basic is set to zero uh I want to go ahead I want to call this one premium premium and then I want to take the border and I want to make it purple so border gray just changes to purple purple 500 uh and then I would say that probably does if I remove this see I'm just trying to figure out what is causing it to not be the exact same so I'm going to assume it was probably yeah it was probably something related to to that but I'm going to go back I'm put that back okay so now I have my premium one that one's purple and then I'm going to essentially basically conditionally render the price based on the value so where it says text XL uh where it says four teams underneath here I want to go ahead I want to say if see this is where it makes more sense to be is is a monthly plan um is active plan I wish I didn't change it but I did so is active plan and then I want to say I want to go ahead and I want to say div um so instead of this here I want to delete this one and then where it says this one I want to delete this one also uh and then I want to say per user so let's say is active plan let's just change it to 129 99 12 99 let's see what we got so we have $12.99 and if I click yearly it makes it bigger and now the next thing I want to do is I want to figure out why the classes are like why I'm getting this weird space okay I'm going to remove this okay it's going way down now um let's remove let's go back to this let's change this out okay space figure out what exactly is making it not be the same other than what I can think oh no that would makees sense so then underneath here con oh what what I'm forgetting here is I'm forgetting this class that says div per user uh per month again this is something I just copied and pasted from uh that I saw on a website so build annually and then I can just say uh the price so let's just change this to be something different so like 339 or something okay so now if I click yearly it changes so that was pretty much the oversite that we had there um and now again if I go to my monthly it changes back so again we don't need to keep it at uh this price I mean if it's yearly it's most likely going to be probably like 100 bucks so we can just change it to 99 but I just wanted to clearly illustrate uh the difference that you can make um depending on which one uh is being referred to so cool so yearly multiply yearly and then again we we left this one out so awesome I mean that works perfect for me and now we can go ahead and we can go to the last one here where it says uh like the last card here so whoever should be at the bottom yeah so let's just call this one business and then we can pretty much just copy and paste the the exact same code here so so underneath where we have four teams that need confidence we can go ahead and just say so four teams yeah so let's let's delete this one and this one and then let's just say this yeah so now you're seeing the difference in values so for the business one let's just say it is uh 49 99 and then uh for the I guess you could say it's going to be 599 yearly and then also I want to change the background gray to be blue blue 500 Okay cool so yeah I mean that would be the pricing card um let's quickly check if we forgot anything and yeah I mean that's it so I mean really the only differences are that we made the cards a bit bigger a bit wider um but other than that it's the exact same thing and then if you go into the small screen it looks the same fantastic fantastic fantastic fantastic so let's go back into our project and then where it says first section let's go ahead and let's add in our next section so um I'm going to go ahead and copy and paste what I believe was called our seventh section manage permissions no I believe it was our eighth section it's called our eth section yeah it was this section here so inside of our product we go ahe and we can just copy this and then we can go into our pricing and then we can just paste it so we have our eight section and I'm just going to rename this folder to be our second section and then inside of here we can go ahead we just change uh eth section to be second section and then we can just go to the bottom here uh and then just change that now inside of our knob bar or inside of our Price p I should say uh we can just import our second section cool so now you're going to see once it's done loading uh the second section is going to be visible uh which is actually just going to be our eighth section from our landing page and our product page and then the last thing I also want to do is add in our footer so let's go and grab the footer from the landing page so copy go into our pricing let's paste it and then we now have our footer so we can go and we can just go back into and we can say uh our footer so footer cool so so that concludes the pricing page um let's see quickly double check looks pretty good to me and yeah I mean we have everything working so that concludes our pricing page uh as well we've also completed our product page and we've also completed our landing page the last page we're going to be working on is going to be our contact sales page uh and this is going to be a page where we're going to have a fully functioning form um using node mailer to like send it or not send but capture uh emails from people coming to the website uh as well as just you know different information that we can uh collect from different users so I really mod model it off of what a sauna has here and kind of we're going to kind of make it our own as well so this is what we are going to to be building let's go to contact sales this right here okay cool I'll see you in the next part okay so let's go ahead and let's continue building out our contact page so the first thing we're want to do is go back into our code uh what is the air that we're getting here uh just ignore this air here I'm just going to close that seems to be like a caching issue I'm just going to reopen my vs code here so just going to save not that but this going to say new window give me a sec here guys you'll be able to see this in a sec all right cool yeah so I just a little bit of a cach in here it's fine so pricing page need to go to our contact page and then we need to import actually let's copy and paste the nav bar for so copy from pricing paste it import it nav bar we now have a nav bar on our page if we run the application again I need to do that npm run death we're going to have an app bar in a second okay so the styling did not apply properly Let me refresh and there it is so again we have our na bar so in our let's go back to what we're looking to build here contact sales we have text and then we have a form we have like the submit button so let's go ahead and let's do that so let's go to contact create a new folder called a first section this is where we're going to store our form first section want to do page. TSX and then we can do sfc first section do div and then we can just say first go right away into our contact page so not here here so app contact page. TSX and then import our first section cool um so let's go back let's see what it looks like and it says first nice so this is going this page just go to first section you're going to have it's going to be a Ed client because we're going to be using a use state so use client import use state from react import Zod resolver so actually maybe we should do uh let's see if we have import Zod resolver uh is going my yes we do not have module so to get the module let's go ahead and go into our components and then let's go to where it says form uh form so make sure you go to the CLI command and then you go into create a new terminal and then you just click add form so we're going to add the form and then this package is going to come installed so go ahead I'm going to close this and you're going to see it goes away the next thing I want to do is I want to do import use form from react hook form and then I want to do import all so in this case we're going to use a star to do that import all as Zed from Zod and then we also going to need the select so let's go to select and then let's add it so let's go back into let's add another terminal npx Shad C Nui at latest ad select just going to add that and then we're also going to need uh let's see what else okay we got that now we have we have the button already installed sorry about that I'm just going to check which ones we already have yeah so I mean it looks like we already have everything do we have the input we do uh the last thing we're going to need is a text area so go to text area copy that and then let's create it or let add it I should say cool so we now have the text area in and let's go back to our application and let's rerun it just to make sure nothing broke and it didn't awesome so we have everything working as needed now we can just go ahead and import all the stuff so starting with the the sheet or not the sheet I should say the select select go ahead and copy all that stuff and then let's go to the very top and paste it the next thing we're going to need is the button so import button and then I also want to just do import going say form and instead of doing this one by one actually we can just copy paste it from shats and UI so let's go here where well let's say so we have our form okay so it looks like they don't have it prec configured so we're just going have to do one by one but that's fine so let's do import form form control form field make sure you spell these exactly how I'm spelling them form [Music] item form label form message and that will be everything let's do import from at SL components slui SL form and then we can also import our input so import input and then we can also import our used toast so that's another one we didn't install we need to add our toast so underneath text area go ahead and add toast if you're wondering how I'm able to like run these commands uh while also my application not crashing what I'm doing is I'm just running in another terminal so I have this one running the actual server and then I have this one just for commands and stuff so that's how I'm it's not breaking okay so now I want to do import use toast make this smaller so at okay that's fine it's this is like a caching herea now Imports I want to say text area and we're good has no exported member called used toast uh it's because it's not being imported correctly so this one's supposed to be from Ed toast so make sure you have this so import used toast from @/ components slui you toast and yeah that's right here .ts this one comes installed or it comes once you install it from shats and UI all right so we're going to go ahead and we are going to define the schema so we're going to go ahead and say const form schema equals z doob and then we're going to say first name so this is going to be the first value in our form we're going to say Zed we can do this uh fill but let's just keep it simple z. string we're going to do a last name same thing z. string we're going to do an email and then we're going to say z. string uh email and also make sure that you have uh commas at the end of each of these then we're going to say phone number soore phone number s. string same thing country and then this one's going to be a little bit different because it's going to be an enum so we're going to say z. enum and then we can include these countries uh in our application we will not be using these we're going to use Canada uh we can do uppercase yeah we can do let's just do uppercase Canada string and let's create another string and let's call this USA you can go ahead and you can add in as many values you want I'm content with these two um yeah go ahead and add them as your business grows so we do company undor size same thing so we're going to have z. enum between 1 to 10 11 to 50 um these are all string values and that's like kind of the most important part of this so now that we have that we can also do an info so we can say info and that we could say z. string and now let's go ahead and let's close all of this so we can just say bracket and then slash cool so we now have our form schema so we're saying that we're preconfiguring the values to be these so whatever somebody puts it has to be a string whatever somebody selects it has to be one of these values uh and so on and so forth cool so let's go ahead and let's create the types so we'll say type form values we're going to say equals uh object we're going to say first name and then I'm going to get the autofill as well so again it's pretty much same thing going on here we're now going to take these form values and we're going to have we're going to pass them to the form but one other thing I want to change is where it says country I want this to be Canada or the USA I want those to be the only two values and then company size um I want this to be the values that we render here as well so make sure that these um are the same values here okay now next thing I want to do is I want to do uh you can do export you can just keep we can keep that the same uh actually let's do export default function first section and we don't need to SP Arrow function and we could just make it like this and then we can go ahead and delete this at the bottom there cool so now we're going to need number of states so we're going to say cost loading is equal to set loading the use state is set to false which is good const we're going to say submitted it's another state we want to check whether or not the form has been submitted and then we're going to say set submitted equals to UST St false and then we're going to say const toast equals oh needs to be in a bracket like this and then you're going to say equals use toast and now we want to go ahead and want to create our form so underneath here we're going to say const form equals use form form values and then we're going to have a Zod resolver so we're going to say resolver Zod we're going to wrap our form schema here around our Zod resolver so this is pretty much just going to che check um like what we're using is like correct and ensuring that like if anything is is if there's any erors in what somebody is submitting uh it's going to go ahead and wrap that so the default values uh I'm going to go ahead and I'm just going to fill all of them so let's do first name and I got the auto fill there so this is a great chance to pause the video to get the same values I have uh but yeah pretty much we're going to make sure that the form is set to this whenever somebody new comes to our form then I want to make an asynchronous function and then I want to say async function and I'm going to call it submit so once somebody submits some something I want to use data and I want to do Zed z. infer and then I want to do type of form schema now I want to go ahead and just want to console log my values so I just want to see uh what is being passed in uh and we can remove this later and then the next thing I want to do is I want to create a try and catch so this is just going to say try so we're going to say the set loading is equal to true and we're going to set we're have a response so const to response is equal to a weit fetch API contact that's correct we're going to do we're going to building out these folders later so it's fine then we're going to say a method is going to be the post and then we're going to have a headers uh let's let's keep this in order here so headers is going to be you can put this on the same line so it's easier to read cont type is this is correct so make sure you have this and then underneath we're going to go ahead and put put a comma at the end there and we're going to just say body json. stringify uh the data so whatever somebody submits is going to be considered the data and then we're going to interpret that data and then we're going to to to change it so correct now we're going to say if the response is not okay we want to throw an error so saying something went wrong next the one thing I want to do do is I want to catch the air so want to say catch air and then I want to say uh console log air uh and then we're going to have a toast so we're going to have it pretty much we can delete this but we just want a notification to indicate um what is the the air right like we want to know what's what's going on so something went wrong if we see this in our terminal know that it came from this section of our function then the next thing I want to do is I want to create a finally so I want to break uh out once we're once we're done right so I'm going to say set loading is equal to false and then we can just leave that there uh and yeah so let's go to this cool uh I believe I'm forgetting one one thing here we have our console we have acing function we not closing something correctly so I'm going to put comma there or my semicolon there set if the response is okay so here this is where it is so if the response is not okay throw an error and then we're going to say set submit it equal to true and then we're just going to close it like this and now we should have perfect so everything's working perfectly so I just want to save it make it look a bit nicer uh and we have that so make sure you have this function exactly uh working or looking the exact same as mine or else it's not going to work okay cool so now let's go ahead and let's actually style out our uh our form so first thing we want to do is we want to do um div oh like this we should this should needs to be in a return and then here underneath this we need to pass pass in that cool so do div class name items Center justify Center Flex Flex call px20 we do MD do px0 do py 20 space y of 10 and then we're going to do text Center then I want to conditionally render whether or not like I want to conditionally render a message whether or not the form has been submitted so if it's been submitted I want it to display uh the submission thing that I've I showed earlier so I I filled it out and then it prompted me with a message saying is submitted so I'm just going to do that now so I going to say submitted if it has been submitted I want to say div let's just close this so div do class name text 5xl and then I want to say div class name uh we could just do talk with our sales team so we could just do div talk with [Music] our sales team cool and then underneath that I want to say div class new text XL I want to say fill out your information and we'll get back to you shortly uh that works for me but I want to keep it consistent with what we had earlier so I'm just going to copy and paste this so let's go to this cool now I want to go ahead and I want to say close this div off and then I want to this is where I want to conditionally render the value so here I want to say div I want to say class name make a text 3XL I want to say text green 5 400 and then I want to say thank you for contacting us we will be in contact with you shortly and again let's make sure to close that to cool so now what we need to do is we need to render the uh conditional sign so close that and now let's see what we got on our screen so we now have the text I want to create a little bit more space uh let's do py talk with our sales team we can just do like py eight or something no okay not going to work um this one here we'll do py py10 let's see what that looks like okay just moved it down a bit so that's all I did there is I just added in a py uh 10 now underneath here is where we're going to actually render out our form uh and have all the values so let's do that let's do form and then let's say dot dot dot form close our form and then let's do this and then we can say if it has not been submitted we want to display our form right because it's it's not been submitted they they can't they can't submit it or they can't submit it they haven't seen it and if they have seen it they don't want to see it again right so let's do form this is correct so we'll do form on submit and then we want to wrap our on submit function by this handle submit um and that's that's good okay let's continue now I want to go ahead and I want to add a class name so class name so inside of here I want to do this so we'll do class name on on the medium size screen I want to do width 2/3 space y 6 and then I also want to do a border and then p8 as well as rounded XL cool now I want to go ahead and I want to have a form there so let's let's continue working so inside of here this is where I want to pass in my form field so I want to say form field so this is the thing that we imported from Shad CI at the very beginning uh make sure you have that here okay cool form field control I want to do form. control then I want to do name equals first name um and then I want to do render equals bracket and then I want to do field so I think I've slightly messed up yeah put too many field and then I want to make this a arrow function so this is correct yeah so we now have our Arrow function we we're going to we're going to remove this actually because this is wrong let's do form item class name do Flex items Center justify Center space y-4 and we're going to say with full now I want to go ahead and close this form item I want to say form label I want to say class name the width of it is going to be 60 we're going to say text 2XL pt- 4 and then we are going to say first we're going to close it first and then we're going to say first name okay now we're going to say form control we're going to say input and then we're going to say class name withth is going to be full and then we're also going to have a placeholder so placeholder uh is going to be uh close that and then it's just going to be spread whatever uh has been entered into the field so let's just do that input equals and this is going to be a string cool so form control now underneath that we want to have a form message so if there is an error I want it to be displayed uh like nicely and that can be done just with that one line there so now we have that we can go ahead we can close that and we now have our first form field so we're going to go ahead and repeat that for our last name as well so let's do that so again I'm just copying and pasting from the GitHub here I recommend doing the same just because uh we've already kind of gone through what the importance of like it is now and now I want to just go ahead and get the HTML and CS out the way and then show you how like how to build a function as well so we also have a phone number and then we're also going to have the country as well so this one's going to be a little bit more comp licated this one's going to have the select uh but it's going to essentially do the same thing so we're making sure that this field renders so all these what you're seeing here phone number country first name last name all of that stuff is what we configured here in our form schema so those are the values that we're passing to the form and then we are submitting them to the form as well so that's what that that's what's going on there then we have this one here where it's form field it's a longer one this one includes our select um and then it's that's also going to be for a company size then we have our last one which is our information and then our information uh we can go ahead we can just build this one out really quickly but this one is just going to say form field it's going to be the exact same as all the other ones this one's going to be name it's going to be it's going to refer to the info section of our form and then you can already tell like you can already see like um Shad CI uh as well as get up co-pilot kind of taking into place uh but I'm just going to ahead and just going to use what I already have so now here's a great uh spot to maybe pause the video uh to kind of make sure that you have the exact same thing I have as well as again I can't stress enough how much easier things will become if you check out the get up repository uh go ahead and access all the source code yourself if not I'm going to give you guys a chance to kind of pause the video uh and again kind of see what I'm doing right here cool so some other things that were're forgetting was obviously a button because we need to submit this form so let's go ahead and let's build out a button so let's do div and then let's say class name Flex items Center I can say justify Center as well Gap four and then here is we're going to have a button so button and then the type this button is going to have a type submit and it's also going to have a class name so let's do class name uh BG black text XL rounded SM and then it's also going to have a width of 80 as well as a height of 20 now whenever someone clicks on uh whenever like the button is being submitted uh we're going to disable it and so that way nobody can submit a form twice uh if of course unless they come to the website again for the second time so let's do onclick let's do form dot handle submit on submit that's correct and then let's go ahead and let's write submit and then let's close the button so instead of closing like this we should just close and then here we want to close the button cool so that is the button and then now what we want to do is we want to uh underneath this form here we want to conditionally render some more values so let's go ahead and say div class name text 2XL we're going to make this one the entire take up the entire screen we're going to say text green 400 green 400 items Center space y20 flex Flex call as well as justify center now I'm going to do another div and this one's not going to have any class name it's going to be an image prop and then this is going to be SRC videos and then in mine I also have a kind of like a gif so I want to show you how use that so h28 with 28 now I'm going to go ahead and use the video that I have in my um uh GitHub repository and I'm going to import that so back into my public folder I'm going to go and I'm going to copy and paste this videos and then this video is what I'm going to be using so I don't know if you guys can see that or not but this is what I want to have appear once a form has been submitted now I have that so let's go instead of images it's going to be videos and then I'm also going to have let change this so it's going to be check. GI cool now I at the end of my form I can just close everything El so you're also going to get prompted with this error saying use uh next image uh but it's fine you don't have to necessarily use it this is definitely going to do the job awesome so this is what our form looks like now we have uh our first name last name everything like that um and so one thing that I want to do obviously to make this a little bit more visually appealing is I want to make the I want to kind of like set a width to the input so let's go where our input is and let's wherever we have input okay input instead of having it to be withth full we can just make it withth 80 for example and then you can see how it's going to change the values uh in this example um I can't remember what I actually put here let me give me a second to check could do with full I mean yeah I think all it really was was I increased the height to 16 and and then yeah that's pretty much it let me just double check yeah so I mean that was pretty much it all I did was I just increased the height the weight stayed the same um and also the text is the same so yeah um same thing with the select I can go down to my select button uh wherever it's say select so here I can go ahead and I can increase so instead of h10 to make it H6 it's going to get bigger as well and then yeah so I mean that kind of concludes everything now once we fill out the information uh we're going to say it you're going to going to see that it obviously doesn't do anything and that's completely okay so you're going to see when I click submit if I go to submit here you're going to see that it expected a a certain value uh and that's fine expected Canada received USA so I can actually quickly show you what this is United States of America let's go back to our contact page here uh and pretty much all this is saying is here where I have USA and stuff USA and Canada as values uh they need to be changed they need to be changed to Canada as well as whatever we had previously up top so we had Canada and then we had USA so these must be the values so now once you see we're going to have that issu is going to go away uh and we can go ahead and we can add that so now once we submit nothing happens obviously because we don't actually have a function to send us anything so now what we want to go ahead and do is into our app folder we want to create a new folder called API and then in our API we want to go ahead and create a new folder called contact the inside of contact we want to create a new file called route. TS and this is going to be where we are going to have our function um and this is pretty much where we're going to configure all the logic so the first thing that we want to do is you want to go ahead and use node mailer I'm going to go aead and pull that up so you guys can see what I'm talking about so node mailer is pretty much like an open source project that uh kind of like the developer of Comm like the community developers built to send uh emails like on like using node uh it's really easy to use and it's super user friendly so uh yeah let's go ahead and let's do that so to begin with we need to go and create a new terminal and then we need to say npmi and then node mailer I believe that is the exact thing all right cool so once we have done that uh we're pretty much ready to get going so let's do import next response from next server and then we can say import node mailer from node mailer the package we just installed it's going to be underline give it a sec uh it's going to uh actually yeah this is actually good point so what it's trying to say is since we're using typescript uh it want it wants us to like uh pretty much like ensure that we want to be using typescript so make sure uh you have npmi D- save-dev types sln mailer let's go back into our uh configuration when let's add that and then once we add that it's going to go away so perfect so yeah so if you make sure you have that um it's going to be super important cool so now we want to do export async it's going to be an asynchronous function and it's going to be a post request so we're going to say w lowercase equals request then I want to go ahead and I want to make an object so inside of here I want to say if uh the method is equal to so we're going to need three equal signs of one 2 3 post this is what we're going to render so we're going to say const all of the values that we had in our U form so we're going to have first underscore name yeah first underscore name going to have lastore name we're going to have an email we're going to have a phone number let's let's just do this one by one so we don't mess up phone number then we're going to have a country and then we're going to have a company size so we'll do country or company size company size and I'm going to say info and then I'm going to say AWA wreck instead of body I'm going to say Json and then I'm going to make a function right there so make sure you have this um just to maybe better conceptualize this I will space everything out so we have our email phone number country company size and we have an info where people are able to just kind of add their message all righty so yeah make sure you have this and now what we want to do is still inside of our like if uh loop we want to have a try so we want to say try and then this is where we're going to go ahead and use node mailer uh to transport the object we're going to say const transporter equals we're getting the autofill already so node mailer doc creat transport then we're going to say uh we're going to make sure that we have this exact information so host it's going to be S it's going to be a string so smtp.gmail.com the reason why it's configured to this is this is required if the email that we're receiving is being sent from a Gmail account so the best way to kind of think about this um maybe if I go ahead and I'm going to go and show you let's do excal draw let's see what we can find Okay cool so let's do a little bit of drawing so you guys can kind of see what's happening here essentially we are getting an email actually this is a good way of doing okay so we're going to have this is going to be us and and then this is going to be the customer so I'm going to go ahead and I'm going to add some text so where's the text here uh am I able to add text so this is the client or in our case it's going to be the customer slashers per person sending email then what's happening is this is being sent to this account and then this account here is going to be receiving email and this is going to be a verified like sender so we are only letting the server essentially we are going to fetch all of the emails that are being sent to this account and then this account is going to send the email to us which is the final kind of user so verified sender and fetches email then I'm also going to do a final one here which is going to be us so we're going to be the I don't want that I want this so we're going to be the business SL account slail so pretty much someone is going to come to the website going to try to make this as big as possible then they're going to see the website they're going to check it out and they're going to go ahead and check out your contact form and they're going to send it then that email is going to a specific account and that account has to be authorized by you and it has to be preconfigured by you so typically speaking most people in like a kind of like a tech startup business will have an email form or conf like yeah like a contact form go to like a support email right and then that support email have you have access to of course sends all of the support email to yourself so that way you're able to kind of like middleman all of the unnecessary maybe less important emails as well as spam and junk mail like from your own inbox right because I don't want to see like because again somebody be can could be sending malware somebody could be sending maybe not so productive emails and that can kind of like bog down your inbox spam stuff like that and you really want to minimize uh who like you have like who has access to this uh to your accounts so you have this one right and then once the email uh is like configured and it's seen as legit you can go ahead and you can receive that email so yeah I mean that's everything there uh and I'm going to go ahead and kind of maybe better explain this later on how this makes sense but yeah I really wanted to kind of illustrate that there now the next thing I want to do is I want to go back to the code so so make sure that to continue using this project you have a Gmail account set up and if not please go ahead and pause the video and go ahead and make one because the rest of it is not going to make sense if you don't have a Gmail account then we're going to have to use port 465 that's something again that's uh node mailer specific so make sure you have that then we're going to say that the object is secured it's true and then here is where things get this is where like the importance of having a Gmail account comes into play so we're going to go into our off and then we're going to create an object and then we're going to say the user has an email so this email that we are going to receive as the business is going to come from this specific email you don't have to use this email in instance you can go ahead and you can use your own email it it doesn't necessarily matter it just matters that you have access to it because going for forward if you don't have access to this email none of these emails that are being sent to this email you will receive so I'm going to go ahead and show you uh how to actually do this so this is my personal one here at gmail.com and then there's also going to be a password Associated so pass and then you're going to see that there is a autofill and this is completely wrong so if you want an autofill make sure you do not use it because it's not what you need you need to have a Google account and then you need to create an account so I'm going to go ahead and I'm going to show you how to do all this step by step so Google account now I'm already logged in with the task eag email that I previously had and I'm going into my Google account so I've just clicked this I'm going to go to my Google account and it's going to log me in so I'm I'm already logged in and all I'm going to do now is I'm going to go into uh believe it is security let me double check yeah so it's security then you go all the way to the very bottom uh not the very bottom sorry you are going to go to personal info some there's some place where it's not this either give me one sec here payments no home manage your data and privacy no this is wrong um we need to figure out where the link to this is uh actually found so give me one sec I'm going to go ahead and find that so I'm not actually sure where it went but pretty much all you have to do is get to your Google account and then you're going to search up app you're going to search an app passwords then it's going to redirect you to a certain certain page uh called app passwords and then you're going to want to go ahead and you're going to want to create an an app specific password so I'm going to call this one a sauna CL create that and now you're going to be prompted with a code so I'm going to copy and paste this code here and I'm going to import it back into my uh vs code so this is why I said that the password that they recommended to you is not going to work and you can go ahead and just remove all the spaces from there cool so now what you want to do is you just want to close everything out and you now have to we're going to continue building on from there but yeah just make sure that you I'm going to go ahead and delete this so that nobody can access this uh but pretty much yeah make sure you have your own and make sure nobody else can see it uh you might want to maybe store this in your environment file as like a local variable and then maybe just not pass in your EnV file right so make sure nobody has access to this and then that is going to be our uh password so I'm going to go ahead and continue building up the rest of this function so we can go ahead and just close this now because it's not necessary but yeah we're going to have that we're going to say cons we're going to have mail options so from whoever filled out the email like they have to submit the email so we want that one to appear it's going to be two so this is the email that you are going to be sending the emails to so I highly recommend again having control over this email so for example if you're having uh if you have like a sales email or if you have like a business email make sure that again the receiving end of this is what we're talking about here uh this is going to be who's going to receive these emails so in this example I'm going to go ahead and just use my task ew one because I don't uh have another email actually so I'm just going to use that as as my my email now I'm going to go ahead and click subject and then I want each of my subject forms to have contact form at the top of it and then I want to say HTML and this is where I'm just going to apply some really basic styling uh so that the email uh it does not look hideous so H2 I'm going to say contact form submission and then I want to close my h2 tag I'm going to have a P tag here here this is correct yeah so I want to have a strong tag so I want to make it bold and then I want to pass in the first name of the person into the first name section last name I'm going to have an email and then I'm going to have a phone number country company size as well as info cool so I have an issue here let's try and figure out what it is uh this expression is not callable okay so I think all I have to do is remove that and it went away so yeah that was pretty much it now I want to go ahead and I want to send my email so I want to say await transporter. sendmail I want to remove this here I just want to have my mail options so I just want to have this uh function now I want to go ahead and I want to say return next response you can do a redirect I'm not going to I'm just going to say Jason and then I going to say message say email has been sent so this is sent on the server um the person is like that is viewing or accessing your website is not going to see this remember we already configured what they're going to see which is that animation of the check mark as well as the message saying we're going to contact you shortly so don't worry about this this is just uh for development just so you can catch errors and then also going to put a catch error here actually funny enough we're going to say call console log we're going to just figure out what the air is so console log air again return next response and then same thing email uh not the same thing but the opposite email has not been sent then let's close this and then we can go and say else and we can just say return next response not next but again Json we can say me method not allowed as well as let's close this properly and then we can see what we got yeah so we have one too many that's fine all righty now if everything works as expected we should get an email that is being sent to us from us uh but yeah let's go ahead and check this out it's pretty cool so the email I'm going to say is hey I hey I want to learn more or something let's do IG gmail.com and you're going to see as soon as I put the at sign the email uh like notific like the saying you see how there's an error because there's no at gmail.com but then as soon as you put it in it's back so I'm going to put my phone number and I'm going to say hey I want more information regarding your services now I want to go ahead actually let's just make this something cooler let's just say hi gmail.com doesn't have to be anything right because this is going to be the this is going to be the client or uh let go back to my illustration here it's going to be this person here uh attaching their own email right so let's go back to our SAA and then I'm going to go ahead and I'm just going to have my Gmail open here on another page and then this one is going to uh essentially just show us what is uh uh give me a sec and then I'm going to just cool so now when I submit my email I'm going to show you what it what it's going to say so all right I'm going to go into my inspect actually I'm just going to click subit let you see what happens so if we get an air we get an air submit perfect so we now have our message we have thank you for contacting us we will be in contact with you shortly and then we also have our animation I don't like how it's actually in the middle there I'm going to quickly go ahead and change that it's kind of ugly uh contact and then wherever it said let's go I think it was here let's just remove the justify Center and perfect I went ahead and I open up when I open up my email and this is what I got so I got my contact form submission I got the first name value last name value and every other value included uh and also I got the the info so I mean I mean that's perfect right there that uh that you that's amaz that that just worked um and yeah we got our we got our logo we got our like I think we've kind of completed our entire sauna project uh but yeah I mean that's that's amazing if at any point you guys got confused or anything else you're unclear about please feel free to let me know in the comment section down below I mean but with that being said I think that kind of concludes everything um today let me know how what you guys thought about this video please feel free to jump in the Discord you know you guys support means a lot to me it helps me do this thing full time that's really what I want to be doing full-time so I mean yeah if you guys want to go ahead take inspiration check out the GitHub get involved involved I really want to build the community here and kind of take this to the next level but yeah as as for everything that's it for me and uh yeah I hope to see you guys in the next video see you I almost forgot so that actually leaves me with one more thing which is actually deploying this thing to versel so I'm going to go ahead and show you guys how to do that so go to versel and again uh let's go to don't know why that just opened up let's go to verell I don't want to open up the one that I've already have I want to just go to close close out of this close out of this go to verell no I don't want to go to the we I just want to go to the verel website versel website Cool the next thing I want to do is I want to log in so I want to log in using GitHub uh I'm going to take this off the screen so that you guys can't see it but yeah once I log in it's going to display all of the projects I've already created created uh and in this example I'm going to go to create project and then I'm going to uh post the code that I've just added so using an extension called a VSS code um where is it called it's called VSS code repositories let me try and find it for you guys uh yeah okay no it's called GitHub repositories and essentially it allows me to uh create repositories inside of GitHub inside of my VSS code so I'm going to go ahead my source control and I'm just going to say um new video for example yeah so one of the things it's going to ask you uh to like sign in using GitHub of course click yes go through the whole procedure and then once you have that you're going to have the featur so it's going to say publish Branch I'm going to say uh video projects now it's going to ask us what do we want to to publish this to so I want to go ahead and I let's make it a public repository so it's going to say private or public let's click public so a GitHub repository already exists in a SAA website okay that's fine uh son a website I think for my oh I want to call it something else then just call it project video and now I want to make it a public repository so all I have to do there is I just have to change the name uh because I've already had an existing code uh with the same name so you guys most likely won't have that issue but it was just a super small one if you guys do have it just change your name of one of the repositories then it's going to go ahead and take a couple minutes to upload and yeah let's give it like a couple minutes here once it's done essentially all will be able to do is just import it from resell and then you guys can go ahead and get that link and you guys can share it to your friends so successfully published project video to get help cool so now we can go back into here we can refresh this uh and then it says project video so let's import it and then we're going to leave it the same as project video and then let's click deploy cool so this takes maybe 5 to 15 minutes depending on uh how fast it goes uh I would just say you know if you do you most likely won't get any airs uh and if you do just kind of go through them one by one but it is possible that like in production uh some things maybe some modules might fail uh but yeah I went ahead and I when I was building this project out I went ahead and I double checked that you are not going to get any ears and if you do uh feel free to let me know in the comment section down below and then I can go ahead and kind of work through them with you so but yeah you're going to go ahead and wait and uh you're going to get a link and then from there it's going to essentially look like this uh wherever my previous project was so I'm going to go back and then go into my projects and then this was the one I had uh let's check it out so click on it and then this was the link that I was uh like using as a demo so yeah I mean that's everything for me uh officially now I'm out super tired right now I really hope you guys enjoyed this video hope you guys something from it I hope you guys like it uh it's the really my passion is going forward is really building out these videos for you guys so it means a lot when you guys comment like And subscribe kind of tells me or like promotes me to or motivates me to actually continue building out these videos and kind of puts me right on on the right path so yeah I mean I hope you guys liked it let me know what you guys think about in the comment section down below check out the GitHub repository link check out the source code everything else check out the Discord community and uh yeah that's it for me see you later guys bye

Channel: Igor Codes

Views: 16,685

Keywords:

Id: 1I_mXozC1K4

Length: 313min 33sec (18813 seconds)

Published: Sun Nov 05 2023