Build a Sleek Startup Landing Page with Next.js, Shadcn & Tailwind CSS

good morning incident and um welcome back so basically what we'll be doing today we'll actually be building um a startup agency um learning page right so um this is exactly what we building I'm going to show you guys um you know a quick demo of um of what we'll be building today and uh without further Ado let's get started all right so this is basically what we have and if you scroll in like this zoom in a bit so you should be able to you know see this page and yeah so you can basically um so do the scroll to the right and let us have a proper view right so this is we basically have the navigation section on the top right so when you scroll down so basically have then the AR section okay we have the our vision section so this is just like combination of cards of course so we just have to create some sort of reusable cards for all of this and then we have the other section that has to do with like explore session right so nothing much just let video image on the right and then some test on the left and then we have the testimonial section so this is you know where we basically have you know people giving feedback about the platform and then we have the our team section as I said earlier we'll be creating some sort of reusable card for all of this so we don't have to you know create multiple components for it so just a single component we can be able to achieve the result and lastly we have the our team um our team section so this our team section basically consist of I think it's more of not really our team section it's a newsletter section I think that is wrong we just have to maybe maybe update it in our impementation right so and finally we have the Liu f section on the on the bottom right and um yeah this is exactly what we'll be you know looking forward to building today and uh we're building everything extremely totally from scratch right so we'll start up with a very um you know base project and we just go through it one point at a time all right so without much talk we'll go to the actual project itself so what I've done I've created a start for branch for this and what this St Branch um does primarily is that it allows us to have a basic Boer plate of the entire application so what you're going to do you know change this Branch to stter and then then you want to take your Custer take it to the um the little green icon green button we have here then click on it and then you going to see make sure that htps is selected and you want to just copy this URL so we have it copied and then we're going to go to our dashboard real quick so we're going to go in here and desktop so in desktop in here I'm going to just right click on it and try to open up my terminal right there all right so um this is what we're going to do we're going to just do G clone you want to paste in the link you just copy so it enter on your keyboard and this is going to clone you know this um that particular repository right so it's actually cloning I give you some time so it's done so what you want to do is to basically C into startup this is going to change the um directory into that and LS so you basically see a list of all the you know components or the fires in our particular repository so very next thing we do is to open this up in our vs code terminal the couple of ways you can do that you can just do code then dot in here it's going going to open it up in your vsod terminal or you can just do it manually okay so we basically have this now and um yeah so we good to go and we we can see from the B plate we just have the app right so since we're using next 14 we just have some you know some basic setup so we have the layout I think so the layout I've already set up the font this the font we be using right so this the font that the application is us off of so be using this font and um yeah so you can see that we have lot of red lines right this because we don't installed our packages so this is what we'll do in a bit and and um yeah so now what we going to do is to make sure that our brand is basically you know is on Main and um so basically have our font set up here right and then this is where we are passing it to the body element right so basically have a couple of things here and um let's see right and um yeah we should be good so what the very next thing we're going to to run is to run Dev so mpm run Dev is going to run the um you know the development server and um yeah so after that we just going to proceed and we can go from there so you can click on the link you have so this going to load up right so when it's done we should be able to have a basic setup okay so it's taking some time and um let's check the server so it's just trying to compile so it's still compiling right so we just wait a bit for it to successfully compile and um we should be good to go okay so good good so now um when it's actually done compile you're going to see this initial startup page so nothing much nothing too crazy it's just like a text with the um initial nextag and up all right so um now there we go so um as I always do in every of the projects we work on we normally start off by building up the um you know we start off by building up the actual um color schin right so we then try to export our asset and do all those stuff right so now we can actually come here look through the application the other thing that stands out from here is that we have an actual brand color and that color is this particular color right here right this is our actual brand color you can see that it's used mostly even in the logo and the sign up is used Lally everywhere so this is definitely the brand color right so we can actually assign that as our primary color so what we're going to do we're going to go to tn. config CSS and we're going to do some setup here so right so basically have this um under the extend block so you want to create a new so what I'm going to do for you guys to see it properly I'm going to zoom in right so oh no that's too much it's fine so I think you guys can see like this I think okay so this is this is this is good not bad I just hope it's not too much for you guys yeah so what about this honestly I think this is decent so um yeah so what we going to do we can come in here and set our colors set our colors and then you want to say oh primary color right so going to pick this guy from here so we have any of the shape I lighted and then you can just copy the color from your from your figma and you're going to paste it right in here right so we already have a primary color that's good and then yeah so this is the kind of black color we use so it's actually like dark bluish so it's completely fine so we can just copy that and we can just call this a dark blow right so you guys might have noticed and in this particular project it does seem to be an actual um secondary color so that's fine right so you just ignore it so one thing that is actually consistent is that every project normally has you know a primary color and this is this like orange light color we having right there so um yeah so basically color like this this dark blue we already have that registered and what the color do we have we have this one so this one is basically a black color like tast black should do it for us so we don't have to put that there it's already buil in on Tailwind so we have another one which is black as well we have this gray color so which is okay so can I just you know you know grab that and then yeah we could just call it custom gray a custom Gray so that will be our custom gray color right so let's check this out so this is the same like black color so you don't have to worry too much about it right so what about this the same black color right okay so that's that's good and um yeah we have the color this is more bluish okay so we could just call this light blue okay so past there so I lost track of the actual element I can just copy it again and um put it right there so that's okay so the here is actually the gray um it's having some sort of RGB very difficult to see though but it's fine so it's giving us some sort of like um RGB you can just copy it copy right here um copy from here to the end I think yes so copy that and what you want to do I normally use I just do rgba 2x right right and use the first um result you see basically so what we're going to do is to paste in our RP here and then this the x value so I like to put all the um you know all the colors in X form so we are consistent across board so this is actually a grayish custom gray gray light custom light gray okay that's okay for us and um yeah the same thing we are using the same color here basically the same um light blue color and then we already have this as well and this is definitely um you know a different form of black I don't know do do we already have this ob1 from here right let's see if we already have it within the code right so ob1 is already here it's a dark blue ob1 ending 35 so that's really fine and there we go again let's try this out still the same ob one that's okay so we have literally all the colors I think and one EO right here Ash 1 EO so let's check that out if we already have that one EO is a light blow so we already have it so it's a very much more very consistent design compared to the last one we worked on and see that all the colors are basically like reused which is a good thing for developers they just want to know you know how often a particular color is used okay so let's check this out black what about this black as well um nothing much what about this yeah that's definitely a primary color that's completely fine and one EO yeah good so basically I have all the colors set up now and um that's good for us right so we have these are all our colors we don't really have dark mode or anything so this is you know very consistent now so um the next thing is we need to start worrying about is the assets right so so um first off we want to like export most of the assets used within here and that would be good for us and in this tutorial I don't normally use some sort of Icon library right so we just export what we see on the actual design so what I normally do for um more flexibility is that I try as much as possible to you know you know make a duplicate of the actual file right so making a duplicate of the actual file will allow me to have a copy version of that design so this copy version gives me enough privilege to be able to move stuffs around group thingsam group um you know layers and be able to achieve much more Dynamic result so I'll show you guys in a bit it's completely you know very easy and um yeah you know click on this landing page it's going to you know bring this up so now the first thing that we're interested in is the actual logo on the navigation right so you can actually have that selected and um you can see the export you know um um section on the on the right pan on your figma so you want to click on this little plus icon click on this preview and then you're actually seeing the actual logo so you want to export that so one thing I do that always very consistent in my work is I try to always rename it so you want to rename this to something really unique right so um so I'm going to rename this real quick so I call this logo epic uh so I think it's like the name of the platform is Epic Z lab logo right so let's have that the PNG all right good we have the logo now so now once to focus on this guy there's a l kind of going on here so you you want to like click on it and see what the initial preview is you can see that we have initial preview but the problem with this preview is it doesn't really have some of the other added layers to it so we want to make sure we select everything right so we select everything this let you um box this let you box as well right so this is like the background data so let's select that and then there's this little arrow here I think so let's see let's do contr G to group them okay so I'm actually in the um development mode so you want to like un switch this right design mode so now that we're in a design mode I want to like you know select you know all everything required right here so I'm just going to click on here select this do Control G and then go to the export layer as well let's see what's going on there so you can see from the export layer we basically have those two things that I selected there but then we are missing this little bul icon and then this Arrow icon as well so want to make sure that we have everything basically selected so um there we go so let's let's see how well we can grab that try to select on it so sometime might be really stumbl and for you to know you know where the actual stuff is what I normally do is that I try to you know act select it so you can see that it's becoming distorted anytime you run into that issue you just want to do contr Z to undo and just make sure you right clicking so right click on it so well that you should be able to you know have access to you know the actual actual stuff going on there so I'm going to right click on here so right click on that as well I click here the arrow yeah so the arrow is like hidden right below the actual guy and that is an issue for me so let's try it out right and um okay good good so now I think the easiest approach you know is always go through the layer here and um when you go through the layer you have you know when you just you know play through like scroll down you have all of these items selected so you can see this group now we need it okay this group as well we need it so you can just hold shift on your iPhone on your keyboard and then been able to click right click on each of them so right click on that or old control doesn't really matter and then we are missing the arrow we still need the arrow so we have the arrow there so click control um um right click on it and um then what else are we missing then we have the light B can see that when whenever I over this Frame the light B get selected so you can right click on Val as well so you know you can see from this basic overview we have everything basically selected and except the guy I think so this is the image controlling the guy or the group as well so we'll focus on the image just hit cont um right click on it let's go to select it as well so now that we have everything selected you can just go to your export parts and don't forget to group them right so you can do contr G to group everything you have go to the exports section and then yeah you can see a lot coming in you can see the little Bob icon then you can see the little arrow in the right so it's very small you guys might not really see it so I'm going to like export it and um come in here and just like rename it real quick so call This Joy guy or guy okay so let's um let's view it make sure everything is coming out the way is expected okay good for us so basically have the um the bul icon we have all the little cards and then we have the arrow close to the um the guys head good good good so this is something that is extremely important we take note of and and um yeah so that means we basically have everything you know taken care of okay so some of the thing that want to export is what we have here so you can just export both together contr G to group it and then go to your export and Export this so come in here click on it and we just want to you know rename this to fancy play I think so fancy play good um is definitely icon so what I suggest is when you're dealing with icons always add icon at the end of it so you are able to know that that shape is definitely an icon good enough all right so what else do we have so we have this listo icon here and click on this little export icon and Export so we're going to call this oh it's more AIP F so we'll just unzip it so right click on there okay so let's say is actually asking us to so whenever we um oh export group is definitely a group so let's let's have it selected again click on export and um yeah export activity so we using the group so we just um we unzip it so we unzip it and um it's going to be way inside of it so this is the icon activity icon so let's rename it properly so activity icon so I'm going to cut it away from here and just put it in a normal download so we can track it better okay so let's go back to the second one this is a little camera icon okay so we sport it so why it's actually in zip format is because the developer have used some sorts of like um iconify or some other plugins than the figma design that basically just kind of you know put it in next step folder that way that's why you basically have it in zip format so once to trct that real quick and um yeah yes basically I have to do yes or so we have it here con Bild video so we're just going to call this the video icon it's fine all right so we're going to call that and we're going to take that to the actual directory don't worry it's a little bit scattered but we'll group group them all together um at once right so basically have that and then we have this little chart icon so we export that as well do similar stuff and um yeah we unzip it say zip F we unzip it okay so we already have this and U go in there go in there again and yeah going to rename this to CH icon so I click on it and rename right rename so this is a chart icon cut it out and take it to download okay good for us so basically have all those icons now and the other thing we need to worry about is this image on the right so we can just right right click on it click on export so we have it so it's coming out well as expected so this is a video player so we could just rename it to video player all right good enough we already downloads so scroll down we have a couple of other things I think majority of the things we have here are images of an actual individual right so we can zoom in so right click on it make is actually elected right so you want to switch this to uh what it called to Dev mode right have a switch to Dev mode and then click on this little um the name of the file you see on this um rectangular shape right so you want to click on there it's going to open up the actual image you know using design so you want to save that and um so you um so let's see you need to give it a very consistent name so we going to go back real quick and let's call this Ryan so we going to give it exact name we have here so this is ran I think not ran so we're going to copy that and right click on there save as image and paste it right here right so it need to be in lower case so ran and then save it good good for us so come in here have the selected as well click on the name on the you know right P going to open up the image so right click on it save image ARS um what was the name place I think quite I get a name her name is ky so you're going to copy that so right click save as image so KY K on capit um lower case and then save that so we have R we have KY right so we have we need gin right Genie don't know how that is pronounced so click on the name on the right pin and then want to like save this real quick and yeah so our name is definitely Jin or jinny right and then so we have the last guy here Alan Alan okay all right so click on here and you want to like click on here real quick okay so you could just the thing hello so save that okay so good for us we have all the names of the characters and and then we'll move on to the our team section we have quite lot of assets here so you right click on the image you click on the stuff you see on the right pin so right click on here save as image and um yeah I always forget your names right so this is Vanessa so I'm going to just grab a first name you know this this part right so right click save as image paste in there so we don't care about last name because the first name is fine so Vana so save that right so we need um missing so click on here so right click sa as image and Miss okay the same thing for I right so you click on here save as image so I so you save that okay so we have everything we want and then the other thing we need to worry about are the social media icons so we can just have them you know actually selected and we can go with the export right so it seems to be you know there's lot of padding to the bottom I think let's scroll this here let's make sure that we are doing it right okay it's more of like an emoji yeah they basically use sort of weird Emoji so it's fine it's fine we can just grab those right so let me see if there's a way I can make it like reduce the actual you know font but it's really fine so we can just undo that so I have it selected go to your preview and Export it out click on export okay so this was actually forly Twitter so now is actually called X right so we just call it new or the X [Applause] icon okay so we have the X icon let's go to to Facebook you click on here export coming here let's try to rename it yeah so can just do Facebook icon good for us and then this drible icon dribble um so click on export and Export it so we're going to come in here and just rename this to trible dribble icon so that's good so basically have all our social media icons and um yeah so we almost coming to the end of the actual you know part and that's a good thing so one thing missing is this actual part here so I'm going to do that um so let's see so this is the act shape so let's click on export preview so you can see that it's coming out well including the shadow right at the bottom which is a good thing so you can just export this and um yes we going to call this newsletter this is a very large icon newsletter large icon good all right so finally we have this l you um fter logo so we can export it as well so click on the export and Export logo so we can call this a fter logo okay so now we want to organize all our files so want to do this modified change that today right so you basically have a much more clear the type can just be it's a combination of PNG and jpg right so you can just have that combination so now we have access to all the assets we need to basically run our application right so this is a good thing and then I'm going to close out everything real quick to the right and this is our application good and what we want to do is to make sure that everything here is placed under the images create a new folder and call that images and then you want to drag everything we've downloaded into here right so you want to have just contr a on your keyboard and drag it to the images folder okay that's going to populate so since it's done here I can remove everything from download canot find this item I think it's already moved so I definitely moved everything so that's fine okay so now we have all the all the things we need all the shapes or the icons and I'm going to clear out the terminal real quick and um yes we're done what we have to do is to basically you know start worrying about the actual page layout and we'll go from there so let's make sure that our server is still open running right so what do we have here dark is not defined reference error dark is not defined not sure where you're saying dark but let's check it out is okay and let's make sure that our same configuration is fine okay so that is okay as well so dark blue light so everything is well placed so let's try to restart our s let's cting out and do mpm run Dev okay so we want to go in here want to refresh this so it's going to compile so wait for it to compile real quick and um when it's done should be good to go okay this is good so basically have everything well set up and um good so want to go to our page directory right so what I want to do real quick is we don't need you know lot of the things going on here want to remove you know the entire thing so so here we want to create a main directory and now we have to worry about different sections we have right so you want to undo put this back to Dev mode and then yeah so basically have the different sections so the first one we have here is the navigation right so you want to come in here and if you've already pulled you know you've um you've already created your Branch from the start of Branch you should be able to see that on the component there's a common folder under common folder there's a n bar right so this n bar is what we'll be using you know for this particular project right so that's very straightforward and um yeah so go back here and come here and say navra so make sure that it's actually imported right so the other one has to do with the ero section so what I'm going to do when to come in here go to Source go to component on the component you want to create a new folder called sections right so here I want to create the first one going to be called the hero section CSS a react functional component export right so we have the eror section so scroll down this is the service section so come in here R new file and call is the service section CSS so re I export component export good so we have the service section so what about this oh there's no name for this section so Bally have to give it a name um video player section okay so we have that as well and uh what else do we have we have the testimonial sections all right so um yeah good so we have the section the other section is the te section and then we have new data section okay so we have the same section and um yeah finally we have the news later section so I can just call it the newsletter section CSS okay so this um yeah and finally we have the photo section let's not forget that okay all right so basically I have all of this and um now we want to make sure that everything is well arranged right so uh what we're going to do is it go to the pages um file so let's pin this I be using it more often right so we have a Navar so we have the ER section right so we have the saving section then we have the video player section okay so where is we have but not the service worker so sorry about that this is the service section okay so we have the video player section we have the testimonial [Applause] section okay so we have the our team section think we name it the same section okay so we have the newsletter section okay and finally we have the fotter section okay all right so we go to our app we can see that we have a couple of things here which is okay not bad at all and um yeah yeah there we go we have all the sections right here we have the navigation already preu and we can start working on the actual implementation right so first of all we need to figure out how to position our navigation right so this should be yeah actually make it responsive for um for the mobile version as well right so um yeah so we'll go right in there come in here go to Navar and the images we have to Target our actual image right so go to public images so our image here is actually called the epicel lab epicel Lab logo logo is actually a PNG think right so let's check that out if it's coming well he it's not coming out so I might be missing the names so it's definitely images not SVG so images a lab um PNG I think images. F pixel app logo. PNG H okay now honestly I think that is it a pixel appcore logo yeah so let's refresh this we reason it still complains that it's not send it okay so images EP lab logo.png am I missing anything here not quite okay so let's scroll down so imagesel the weird reason it's not really like propol right so let's make sure that we're in the right place let's put the random stuff here here that is printed oh in the right place okay so images let's do Al PNG okay is it like most of the images doesn't really come out well so that is very strange right so I'm going to check this out real quick okay so Alan is really working I was um I forgot to basically you know use the actual Dimension which is jpg not PNG for Alan so Alan is coming up well which is okay so now want to focus on why this epixel lab is not coming in or probably some sort of typo so I'm just going to to be on the safe side I'm going to just copy the file name copy that and paste it right here so it'sin definely a um you know it's actually a PNG file so here's the PNG right there okay so it's coming right definitely a typo that I didn't I didn't spot earlier so good good enough so want to make sure that all of these links are well placed we have the home we have the abouts we have the our app we have the contact and so right so going to just grab all of those and call it home so going to add more links here remove this and then going to grab it and just add more of these links so About Us by the hour app can copy that and I think finally we have the the contacts okay so and at the end we basically have a combination of login and then the sign up button so basically put this in there so this is actual login and then is actually called sign up so this is definitely so we worry about that real quick yes so we're going to you know use this button so we actually have to you know confirm the initial Buton we have so basically make our design it so what we're going to do is to already have a very usable button right so you can check your Source component common main button right so you see this is actually the main button we're using right so what you want to do is to grab this go to your main remove that and use M button so main button um actually has a required prop and first of all let's import it so now is imported so we have the test text must always be specified for every button so the text name here is actually I think sign up so I'm going to look at that quick yeah see it's coming out well but but then the width is well too much so want to I like this now and let's get the actual width of this particular um button so one thing I've always explained in previous tutorials is that whenever you have your button elected make sure you have your um your your inspect settings basically set to R in your figma design right so we don't want to be using pixels every now and then but R you know actually accounts for responsiveness and other Co stops right so we can see that the width of this actual button is um a seven R so we can use that as our default WID right so you can copy that and we'll go into the actual the main button we've already created main button right here and we have the full WID for buttons right width for the width or yeah so this is definitely the width we'll be using for our but as our default with and this should be our default item as well so you can copy that so you can come in here this is like a reusable button I've used it in numerous projects so it's always good to have it handy so you don't have to basically Cate it from scratch this is like the same thing across um in most projects as well so if is a normal button so we're going to give it this this height so let's go back good so when you come in here you see that our Bo thing is actually coming out you know perfectly well so I notice that there's no like like minor Shadow or no Shadow at all no Shadow so we can actually remove the Shadow from our part so Buton normally have shadows so you don't want the shadow to be including your button you can just you know add a class field classes and do Shadow no so that should definitely just set Shadow you know can see that the shadow is up okay good so with just a very minor T we be a able to achieve the actual first part of the application and um yeah so this is about us this is our art section right is home and so on right so one thing that the designer obviously did not account for is the mobile view so we will actually be accounting for that so on a much much smaller screen so we supposed to see something that looks like this which is okay not bad so but then we have to you know change the logo and put some sort of uh what do we call it hamburger right here so in order to put our logo so we could just reuse the initial logo we already have so we can grab the entire Source here we go to we go in here and uh we paste it in here so the width can be smaller it doesn't have to be you know limited to to that so you can be seven with or whatever you want right so in orderorder to for always always get the urger I always recommend the you use this site there are lots of things you can check but this side is just a very great way to to get icons basically okay so let's say urer so urer think Arrow okay ambur is not coming up so we just want a way so anything that is stack we can use to get any stack element that we completely fine so let's maybe search for stack okay any fancy stuff basically you know it's fine yeah so if if we're not able to see any fancy one we can just you know do a global Google um Google search basically okay look at one fancy fast line is okay we can use that so we can just be creative and use any custom so oh this is hamburger is here so we can definitely use this now probably at Le very corly so click on the SVG part it is going to you know just grab the actual SVG for you so what I want to do is to go in here go to our public go to images or you can just create your own folder right this SVG can create a new folder call it svgs and you want to put the AR there so create new. SVG they want to paste it in so now we'll just have to link this to our actual application right so um yeah there we go okay so let me remove this part oh we actually using the Lucid package you know for it so we are getting X from Lucid from lucid right so but then we still need to place in the actual you know what's it called the actual urger we have we just got in so we have SVG and. SVG okay so go back to code we minimize it and uh it's not coming up well so let's refresh oh can see that it's coming in so when we click on this should be able to all right so we have a much more proper setup right good good good so one of the thing we need to worry about is is the actual links so you click on here all these links they need to reflect what we have in the actual navigation so it's very easy what you have to do is to copy everything here sorry about that so copy everything from here and we're going to paste it right in here right so we going to just paste it in there right so you can see that everything is coming when you over we tend to have the primary column okay very good so and then the only thing not working properly is this last part so we can just grab it and we can put it right here I think so click on here and see we have the login and then we have the later sign up button which is okay so the mobile you get to see this view which is completely fine while in the desktop they get to see a much more elaborate view for our navigation okay good good so we're done with that and then we want to quickly move on to the hero section okay so this is where we about to get our ends dirty all right so we can just close it out and go to AR section and um it's very easy you know there's nothing there's no layout you cannot build with flex or grid right so not layout is too complicated that is not achievable so no matter how it's designed you can achieve it so what we're going to do here this is the section can just rame this to the section and I'm going to create the two divs we need so this is the first div and this definitely is the second div right so um the first D basically you know contains a couple of things couple of paragraphs and then a button so what we're going to do here going to do thep right so I'm going to grab this guy and paste it inside and I'm going to do another P tag I'm going to grab everything here I think this so mean don't be acting stubborn so I'm going to copy it and paste it right in here so it has a um after comment for some weird reason the font they use it seems to be different from the front they be using everywhere else so that's some sort of consistent thing okay so we have the in as a after comment okay so that's okay and then the other thing we have is basically a div this div has the actual you know get started kind of button right and then it has a compl of other things so we have a diff we can put the image right there so just going to copy that go to nav bar we use the Buton there so we can just grab this one go in here and paste it right in here so don't forget always import it and I put the actual test there so the actual test is like gu started get started so and then we basically have the other part it has to do with the completion of the the icon and then the the text so what we're going to do is we need our image to be there so we do our image specify our source SL Images slash play yeah so I need to get the actual name we used so that has to be I think the play icon or something um so video icon I think is this one not that one video player or player I think H okay oh fancy play icon okay this is the way we named it so we can just you know grab the exact name there copy that name get the name we don't name anything we just want to grab the actual name PNG and um don't forget your art is always important always include it in your implementation just in case we know the brow is unable to load the icon this is actually full back test you know to render to the way to the UI okay so let's make sure that that's coming up that's okay and um yeah we need to put our L Mo right there okay so come in here when we done we'll put our LM so this is completely fine so what I will do is to come in here give this FL and it Le you g it's going really fine and um yeah so here the font here has to be bold right so we don't have to worry too much it's black by default and the other thing we need to worry about is you know styling the actual stuff here so what we're going to do here is so font the font weight here is actually 850 um 50 so we can when you all light on it you can see that we have 50 as a font WID so the font size is 4. 375 R so you want to do text 4.375 R but this is going to be for you know the um for medium devices opoids so for smaller devices we can just do text um Excel let's see that uh no it's too small or you can do to excel let's check that out okay not bad so could could use to Exel and um yeah so the the phone the siling is actually you can copy this just do a global search on your code so first of all we need to like close out some of the things we don't need you know have this thing so do the search so you can see that we're using that dark blue now weing configuration you can come in here and just do test dark blue so that should give us the appropriate stuff we need and the same thing applies for you know the the text here so the text here is already this so you can just grab that you can come in here text P data the text so so the font is going to be 500 okay so let's see how it is so far so refresh this and you can see we have a much more consistent flow right so the only difference here we might be adding is that we might be adding some sort of break point here and there right so but that will come up when we already have this image on the right so let's add the image on the right real quick so we're going to add that so you're going to come here do your image you know specify your Source then the off is actually um so I say so guy with phone I think with phone with phone and other the options I think other action icons or surrounded action icons okay so this something we can do make sure you close the image tag and um yeah so come in here do SL Images slash I think we call this guy happy guy not sure but we're going to go through here and yeah we definitely call it happy guy can see it right uh here so you can do happy guy do PNG so this is going to bring in our guy you can see our guy is looking great so what we're going to do real quick is going to do going to do the alignment so you can come in here set the place and just justify between so that's going to give a space between the left and right and make sure that everything is well positioned I think so 10 Center It Center okay right very good so the other thing important is that don't forget to always set your line height so for large screen devices the line height here is very much so it's like it's like this so let's see if it's reused it's not really reused so it's here we can copy this copy that and go to the text right so you can say medium leading and just paste it in there so this is going to give us a proper line height which is okay and um yeah so on small screen should be able to have a much more consistent flow so what we're going to do on a small screen going to come in here plus column medium screen make it row right so don't forget to give it some gap of four four which Gap is okay and um yeah so this is something that we will be doing and you can come in here to the page let's fix some issues we're having with the um the spacing right so we need to give it some spacing downwards so you can grab this on the div and grab everything here and paste it right in here and what I want to do sorry about that you a class name so top can be eight right is 10 depends on how you want it or 32 okay so on a nor device let's make sure that it's very consistent show me far off yeah so a small device it can be this way you about on an actual device you can just do mt8 so yeah so the Ed is not far off we are still SN okay so there's always some gap of space between both side which is like eight Rim right so what we're going to do is that we can really um go to the N some sort of space in there we can remove that so mx41 we can just take that off thing so this is going to to stretch our n Bar to the end so that we can basically come in here remove the link here it's not it's definitely an unused inut so you can just remove that so we come in here and one thing you want to do is to basically give it some sort of you know spacing so MX n RM right XM n r so let let's try try that out so this is actually only in um in what do they call in um large screen so what I wanted to do is not MX but PX you know some sort of padding so let's try that out okay all right so this padding is great it's not really the way we want it's a bit so we can say um me medium can basically have this ping left and right right and then for smaller scint you can just do PX4 that should be decent enough right so the problem with this L is it tries to shift everything so we can grab this and just make sure we're using it in this container and not everywhere else right so this one gives us a much more proper view of what is to be expected right so I can do this by doing 24 24 thing okay okay that's that's pretty decent okay good desktop we're good right so the other thing here is that on a desktop device want to give um the navigation the same PX right so but in that case going to be an MX I'm going to copy this real quick and go to navigation um let me undo okay so that was actually in the yeah in line 18 so go in here so we just do our lium MX right so this one basically allows us to you know to have it on the same horizontal plane right so everything is where line go left and right which is a good thing and U yeah we have a multip consistent so let's check some more screen coming out well right so we just want to fix the issue here between the buttons so let's fix that real quick so we can see that the buttons are actually horizontally aligned so we can fix that so go to the Aro section so we have the main button in here so we just want to do class Flex C four right so I want to make sure that the items is actually centered so item centered so the gap between here and here is like 1.75 R so we already have some gaps so we just have to you know iol it into the appropriate gapping so we could just do four here already have four okay yeah so I think that's the four we already have so let's say 1.75 R okay we place it right there 1.75 okay good so they learn more I have the font size of this yeah I think that is like a normal font size you know let me be sure one point yeah so we can actually put this in our TX config so it's relatively usable we don't have to be specifying it every time so come in here B your colors come to font size and um we can just say nor you paste it in there so in here what you can do is you go to your hero page and um yeah just do text can see that text is coming or when you overr you can see is the one You' you know basically set okay so we want to make sure that this is you know aligned vertically okay so we have the L Mo we have and you want just want the put items Center in there okay so the gap between um here and here does not really oh it's much it's 1.56 so yeah so come in here and specify the Gap 1.56 right okay good good so one of thing we want to worry about is the spacing between here and the top right here so um might not be good because the way it was designed wrong but it's fine so we can just do four r or three Rish kind of you know Gap so what we're going to do is to go in here and M top let's do 3.0 first okay that's pretty decent to me um not to much right so might be okay all right so we have a proper view of this and this is how our interor section is turning out to be right and what a page and let me just remove this from here show we have a consistent flow right so um this is what we have now and it's looking well good so let's check it on a smaller device and see that we are having a much more finer you know screen right so everything is working as expected good great okay so this button looks a little bit you know longer maybe the text is different right so probably we have to adjust the text in each of the button so just put text number and then we fix it so that can actually be done within the main button component and um yeah so let's go to the actual text okay so this is the this Al the the text I mean the actual text of the button so close that the actual text of the button um text okay there we go okay so this is the text right I see I see so we have to basically like set it right here I think yeah so that will be the actual text color you know of our butons yeah so we could just add it to the classes text wi and text number so text T white rounded okay so let me undo I did some okay that's okay so I can come here since this basically has our text this button yeah this one so we can definitely come in here and just make sure that we are using text it's noral right so yeah that should do it for us that should if we're using any other text whatever but that alone um that specification alone should be able to you know update the button for us okay so text number is 1 125 in width right so text white it's still text white yeah so not sure why it changed the close to blackstead of white um okay so let me debug this real quick okay so let's put it here maybe all right not text this Tex nor okay so that's okay so we've basically like achieved what I wanted right here so the width of this button here is obviously 10 point5 R so this now you can go to your EUR section and make sure your Buton is basically using that withth okay good all right so this is it and on the mobile we still have a very much consistent flow okay so we're done we're done with that particular screen so the other screen we need to worry about is our services screen right this is a very very simple screen so we have to you know Dive Right In and then go through it one after the other so we have to create some sort of reusable component I can see that it's very reused the service the title and the the stuff so the same thing so what we're going to do we're going to create a reusable Ed component for this and I'm going to go to common and create a new component I'm going to call it header CSX we have some component export so we have the E there and what do we have we just have a couple of things right two paragraphs so duplicate that and um yeah so what we actually taking we're actually taking the title at the same time we're taking the subtitle so we can basically have the the interface I props so the title is going to be a string they are both required and the subtitle is going to be a string right so we p in the you know the title here and the same thing with the actual subtitle as well so copy that and we paste it right in here right so we can just you know call it flex and give it a gap of two so it actually Flex colum right so we can call this um so this one is basically taking a color this like a normal custom gray I think let's be sure yeah it's our custom gray color so you can say text custom gray okay so the the font WID is 700 the font size is this I can just grab that real quick H so font size is basically like you say text so um the WID is font you specify the weight and they said is 700 right so we actually have to copy this and paste it here for the subtitle subtitle so this one basically have our ob one I think this is the dark blue okay so that's dark blue so we have the dark blue we have the font size is this so we can just play with this as well so this for medium devices you know for normal like small screen devices can just do test to excel yeah around kind kind of Remish value and then yeah we should be good to go so this should basically serve as our you know Tex Center to Center the item so you can just do text Center you know for both paragraphs so these are either so we can actually reuse this within the um our service component so what I'm going to do quick going to close everything out close out the her Section go to our Serv section so in here this is actually a section and I we start it with a section and there we go so we have a div so this div basically has Eder right so there's no point specifying a div you can just put it on top of it so we have to import it so the title here is basically we can um give it our own title and this is service so we can just say service doesn't matter and then this is the um the text right so that's description first description oh subtitle we use the word subtitle so paste that in and let's see what we have oh not bad not bad at all the only problem we might be having in that approach is that we have to convert this to you know um oper case so go to the Ed and uh let's put an uppercase in there and in here want to be able to give some sort of margin right to the top so empty or your Gap so your Gap should be 1 Point sorry about that let's check it again 1.19 R okay so go back and then you can see that we have a very good flow so one thing you can see the spacing on service is not quite the same with the spacing here right so I'm going to do that sorry about that with the spacing here so this is like later SPAC right so want to like copy this so this letter spacing has to be you know spaced correctly so come in here and then can this spacing let first letter so let's say spacing so spacing we have lots of Border spacing so Space X all right let's try Space X not sure I've used this before but let us try it out so paste it there what do we have going to grab it paste it right here so let's see H not quite really so what I want to search real quick is let us SPAC in ta so yeah this should be in the official um ta docent mentation it's very easy to to get oh tracking right so you can just use this tracking doesn't really matter so copy that come in here and um yeah there we go you know just paste it right in here so basically have tracking and remove one of this okay good you can see that this is well tracked so we've increased the tracking and um yeah there we go basically have a usable component for our typ right so if we're working on subsequent sections it will be easier for us to you know basically see those things so now let's worry about the cards right so we basically have the same text right but then we have you know some sort of Shadow going on here and there and U yeah let's build it up so open up your Camal close everything you know using except the service section I think so pin this in there and and then yeah one thing I want to worry about here is the actual car right so under your components create a new folder called C component new folder so we're going to call this the cards so uh what we're going to call this service card so we're going to call this service carde so this is a service car functional component export so this is our service card right so this service card going to be taking a couple of things right so we can actually start by actually defining our interface right so now it needs to take in the icon URL that is a string need to take in the title the string as well and also it needs to take in the description okay so we're taking in the icon title we're taking in the um the icon URL sorry we're taking in the title and then we are taking in the description right so if for example you want to pass in some sort of action which I'm not doing now just in case they click on the L mod button so you can actually add a new um a new field to it an action and it's going to be return void so this basically means that it's going to you know not return anything probably you're routing to a different page or something so going to be a function that returns nothing all right so now we basically have our set and we're going to Define everything right within here so this is actually you know optional so I make it option in this case so I put the icon right there we put in the title we put it in the description and then put it the uh the action okay all right so this is a card and what we're going to do is to create a this for it so let just say we have um you know One D two paragraphs and then a button I think so the text of that button is actually Lear more so learn more don't forget to close it out and um yeah that's a very good one and then we basically have to put in our image here the image will be have we have commun in so this will actually take in the icon URL and the op is going to be something you define so going to be the service icon right so then the title will come in here and description will come right below it all right so now the action here is I basically has like an action prop so you can just specify that action prop specify your action right there it's really optional it's not something required so now this is our icon and one thing we want to do here want to make sure that it's a flex and it's F column and the gap between everything should be where aligned let's check the garbage here 2.58 uh 2.56 yeah so 2.5 56 so 2.56 R is our Gap so we basically have that kind of consistent gapping which is okay and um so the L basically own width so the width of this Buton is 10 r as well so you can copy that and go to classes and just put in your width there which is perfect so you can put in your WID there and um yeah so we need to worry about a couple of other things like the actual you know the font size of this so you can come in here and it's like 2.2 Rim I think so 2.25 r25 R so the font is actually 700 in WIS okay so um we're good we're good not sure this if there's any thing we need to specify it for the title for the description we just have to do text number and the font way should be number so so text number so that's completely fine okay so we have our service card all set so what I want to do is what other thing we need to do we need to add the shadow this is our box Shadow so you could just grab you know everything here you know basically right so most of the time um what you already have in your design is already like tribute your tewi so um what you should be doing is you want to gauge what te basically has with what you have in the actual design so you can come here and just do Shadow media many a time now you just fix your issue so we can we can't really visualize it yet so let's have the service card imported in the actual section so in this our actual section we need to create some an array of our data so you can call it a service data so it's going to be an actual array of object that has some IDs right so it's going to have the same stuff you know we talked about in the service card the icon [Music] URL so the icon URL is going to be the link to the actual icons so you can do this Images slash so first off what we have there is a design icon I think so design icon I don't know is it activity icon good this was actually called the activity icon okay okay so that's okay and um yeah so let's get the other props the title and then the [Music] description so the title here is actually Graphics design and I'm just going to grab that and include it right here and we have the description as well well I think it's a subtitle really let's grab it here description description here is actually this is definitely column not the semic colum so you can copy that and put it within quotes it's completely fine so description then you can decide to specify your action right so action needs to be some sort of function that does things right so we don't really have action we can let it go so you can let it go so you could come here and let's go a duplicate it's going to be one and this is actually the video icon I think so video icon let's be sure okay so this is one the title is different it's called video editing so you're going to copy this and paste it right there and then let's grab the last part so you can do id2 and this is not video icon but actually digital marketing so let's grab this and I we'll just paste it right in here and yeah so we need the Exel icon for that case Okay um Mark is like chart so it's like chart icon so be using this chart icon okay so that's pretty much the same so now we can play with this service data to display our actual service code so you can come in here right so we want to look through this content and um so we just say service so what we're going to do we're going to actually call the service card here so the first things first we passing our key so this key is a way to un identify each item in a four um the four Lo block so it's extremely important you specify it and it need to be some sort of unique identifier so we have the key other things we have we have the title so we have the service the title we have the description sorry brother service the description and icon URL so we have this service out back on Ur So this just gives us a much more proper view let's see what we have good it's coming out well as expected so we have to we have little modifications to make and um we'll be back in a moment okay and uh welcome back uh so I took a break I just needed to um do other things so basically we're back and what we're going to be doing here is to basically make sure that you know the guards you know is basically hars the same pattern as what we have here so you can see that everything seems to be aligned to to the left which is a little bit weird so let let's F that real quick so go to the service card and um okay so we have items all to put item Senter right there I should do it going to position everything at the middle and um yeah yeah we're almost there we need to add some ping so ping top is 1.19 ping bottom is 2 point so it's like we're just trying to gauge it so the top is like 1 n 1.19 um 1.91 sorry right so let's quickly have that done and can just do top 1.91 right okay and um yeah so for the bottom 2.81 right so you could just come here and say the bottom 0.81 right so for the Sid it's the same so it's 2.56 you know most more consistent PX 2.56 okay so let's see how it looks now okay looks more better so the B radius is something that we did not talk about the last time right so we have to oh it's really not the same so so the B radius here is 1.75 the radius here is oh there's no here I mean okay I think it's not it's not really existing yeah is 0.6 okay so it's not it's not something reusable or it wasn't use in multiple places so you can just grab this and add it the rounded prop right here so you could just do round it so if you paste it in right so it's going to have that kind of roundness and then yeah that's good so one of the thing I want to do is to make sure that it's actually spread the cross right so we can just do space around or Justify between well in this case it's more of a space around you know for the card so what we're going to do we're going to go to the outter section this is the D that contains the entire thing do flex and flex is flex row so it's going to be a flex column or small devices why um medium device a medium devices upward is going to you you know going to being row form and yeah that's okay and we need to be able to put a gap well let's do Gap five and there's a space around justify around okay so that's going to justify the around and one thing that seems to be missing the proper spacing right so you over we have three point let me Zoom this in we have 3.56 Rim as Gap so we need to put that into consideration so 3.56 r as the actual Gap and um yeah yeah there we go I say that we already have our card and depending on the screen size or whatever everything is relatively you know responsive with a shadow by the side and all those stuffs so one of the thing I would love to mention is the spacing you know from here to the top right let's check that out um on the actual design so here downward is like 6.75 R right 6.75 R so you go to the service section you can just do top 6.75 R so we can just close all of this no needed so yeah so basically have that same flow let's see how it looks on on mobile it's too much on the mobile so we can actually reduce that we can assume that this is like a medium right so on a small screen we just do um mt8 right so that's probably decent yeah this is way better okay let's see yeah not looking bad at all you're doing good work all right so basically have all of this and um the only thing okay not only thing so we're we're good with our section um the the shadow at the bottom seems to be much more intense you know compared to the you know Shadow at the other part so what you're going to do you can just if if you don't feel like comfortable using T Shadow you can copy all the Shadows here that you already have and what you want to do is to go to global. CSS right so give it a name so so going to just give this a service card Shadow so we're going to paste that box shadow in there seems to be quite a lot so this will give us the exact you know effect as what we already have so we'll go back to the Serv card we'll remove the shadow medium we'll just replace it with you know what we just created okay you can see that our shadow is coming out much more intense much more better you know than the way it was before so this makes sense is have to Shadow from the design oh sorry about that oops all right so you can see this is the actual Shadow we getting from here so this is the way you you work with shadows basically so if what you get from T doesn't really make much sense so you just want to you know export the manual Shadows okay so let's go what else do we have we have this little section here what do we call this um I think this is actually called the explore section right not sure if I added it to the actual page but let's see or video player section okay it's called video player section and um so it's pretty much straightforward so what we're going to do is to have two designated diffs one for the left pin and the other for the right and we're going to put in all the elements right within it so we're going to do this section and um yeah there we go and we have to specify of this for you know the notes the left the right pin so in the left pin basically have a paragraph and we just copy this and paste it right there and actual text and we paste it right so basically I have those two text and theyve all be pasted in and the other thing missing is the button so we could just grab let's still a button from the service card so we can just grab it from here and take it in video player okay so I can close the rest close this and just in it okay so we can place the but in there right so don't forget to import so it's actually imported and yeah so the text there is like explore explore so we don't have any action right so the close the width of this Bon here is um 88.2 r so you're going to grab it from there and you want to paste it in the width um field and then the roundedness that's the B the radius it's quite a thin so it's like six is very with very large B radius some weird reason so we have rounded so paste it in as this R and then the text is basically so the background so the background is like white it has some B orders right so we have to mimic exact this exact button so one thing nor is spend time you know ining out components you know this Atomic elements are actually what gives your final design that great look so if if if they' not done properly you might not really have a good outcome so you have to basically spend time you don't have to rush it right this is what I see much most new Dev basically do they just try to rush all his component at once no he basically has to take your time and make sure that all everything is you know in proper order basically all right so let's over over this and um yeah we already know we have some colors there and copy that that would be our border color right so come here and say border border yeah so paste any color copy it again there a color so the PG now from what I can see is actually White right the B is white even when you over is going to be white as well so there's no Shadow there's no Shadow so you could just set Shadow none so Shadow none that removes the Shadow and one of the thing we want to do is to make sure that this border is you know is proper the way we want it and the only way we can achieve that is to say okay B two pixel so even if it's not we can add more to it right so the explore which is what we want is of this color so just copy it so we already have this color I'll just look for it okay lights blue so we have text so text light blue so that will be our text and it's going to be in b I think yeah so we want to do font boot okay so uh maybe font size one I actually see that using a separate font probably that's why we have different you know kind of outcome and using DM s which is it doesn't really make sense but it's completely fine so we just have to make sure our border is coming right up right so um the border is what we're trying to do and this is it yeah so this color X so this is border and yeah I think the B is already cool let L room oh okay so the but is there um I'm not just saying it so it's completely fine so the height of this button is 3 not sure if this is the same thing we've done before but let's see okay not at all so go in here put the Eyes there come here me specify the height so yeah this is the height of the button so if it's not coming up you can just make it you know um increase the specificity oh for some we still does not come up um he he is this okay yeah that could be because we have too much um yeah let's ruce the B see okay three four I think okay something like that so I think this button is becoming you know more of what I wanted so it's more like that and not sure about the ice yet or it looks more small when you're looking uh when you when you zoomed out okay that makes sense let's make sure that when you over we don't get to see the primary color so you could just do over BJ white when you over yeah so you're going to have that white color doesn't have to be an issue right so that's okay and um yeah so let's get our image in so that's completely decent okay so what you want to do here to come in here and the image s um video layer image I just player it's fine so what I want to do here is like slash Images slash what do we have we have the video player we actually named it the video player so you can come here the video player.png right that should give us the actual image I think yeah and then so let's Ty the title and then the text should be able to should be good to go so I think this actually is the light light blue or the dark blue not sure yeah the light is blue okay so do text so text light blue so the same thing um yeah so basically I have to give it some heading right it seems much more pronounced than the rest fun board text to excel like that so let's try that out okay so that's pretty much it pretty much decent yeah so then this one has this grayish color right so I think I already have this in the terminal config just going to fetch it remember what we converted to custom light gray that's it convert it once to um from RGB to noral X okay so we want to paste this right in here okay not like that sorry you don't need a square brackets okay so let's go and good basically that's coming up for mhm right so let's put the space in here is like one room and so we can just ball this doesn't really matter say bottom four right so and then what we want to do is I can as well just make sure that we have have mt4 mb8 or 16 let's try that out okay so it should be fine okay so that's okay so now we want to increase this font by little a bit I think it's a different font but we can just bump it up a bit so let's do that come here and just your text and R let's try that out okay 1.2 okay so similarly similarly that's completely fine looks great already and then yeah let's align it and we should be able to call it a day right so um come in here here's a section right yeah so we can align it here and say Flex justify between item center right so give you some Gars if you want have it so meanwhile this is for medium so uh you want to just do MD flexible F column so small screens should be able to you know experience proper stops come in here and we want to make sure that it's far away from the top so distance between here and here is like 11.31 so you can say top 11.31 frame okay so that is very decent so let's let's check the smaller view of it okay good job so it's coming up well as expected you can see we basically have it on a small device so on the last screen this is what we have so that just gives proper view of that section okay so um moving on we can actually you know um move on to the um yeah so normally you can actually set a width to your actual component right set a width to it like this the width here is like 13 um 9 G so you can do that as well so what you're going to do I'm going to show you guys how you can do that real quick so for medium devices I say the minium width the maximum width is actually this and yeah so it's this oh my god let's track of it for the width okay so let's get the width again so yeah maximum WID is that and then here just want to make sure that you um specify Flex grow here so this will actually go through you know ignoring the WID so um let's go yeah so basically this is it and we're going to make sure okay so let's see let's see if we're actually doing the full WID let's place that in there so with full so we basically have a definitive um with for this here so that's actually what preventing it from you know properly um you know oh oh okay okay our image basically has like a width of the you know the entire width of the image is basically like this so there's no um there's no valid points you want to do this so I can just undo that real quick right and um sorry you need the margin top yeah we should be good okay all right so um yeah so there we go we have the testimonials so let's play around with this as well right so let's quickly fix this so testimonials so video section okay so we have it Tonia yeah so let's go to the service section yeah something like that so we just copy this and put it in this section okay so we'll close everything out okay so what we're going to do here these already testimonial we know what to expect um they have different text which is FC fascinating so what we want to do is to make sure that we have something similar or still works so just going to be the review data our review data right so we have our ID which is okay we have our images um so instead icon URL we can just have image URL so this is um R Ran So let's go [Applause] PNG so what I want to do is I want to give it the react review then the name of the reviewer so I come here and [Applause] say so review name Ryan K what it name so I can copy this copy that in there P it right in there and the review is going to be this I'm going to copy everything here and have it pasted right here so that this is um rayan reviews review right so I come in here create a different um reviewer so one and this is actually Kay so you can just do K ky. PNG and let's make sure that they're always in PNG right so I'll check that out in a bit this is K's review so copy from here to the end and paste our review in and our name of course K frame so we can just paste the name right here okay so let's move on to the T reviewer yeah so Jin yeah so basically we can do that spir straightforward come here paste or review in here and um so um so say the image is gin and then this genin Whitefield okay genin Whitefield so you can paste it in here okay so you can copy this and paste it let's don't forget to the ID the ID to two and this one has to be three so we copy all the review and in the review part so copy the entire review and replace it so what this guy's name Alan Kim yeah so I'm paste it in here [Music] mhm so I think I spelled this as Alan right so this is okay quite all right this will be our review her data so now what I want to create real quick is we want to create the actual um testimonial card so go to your card section and create a new file and we can call this the testimonial card not CSX right so we have component export we testimon card so what wor are we expecting a couple of pen we expecting P can place this in in our I props so we have the interface so this is what we're expecting we're expecting the image AR expecting the review we expecting the review on it okay so we haveing all of this now and um yeah okay so basically I have this card so let's get started so we have a div that contains the image we have another da that contains two paragraphs so two paragraphs is basically going to be the review and the other paragraph has to be the actual um reviewer name so what we're going to do here is to make sure that we are restructuring what's needed from the I props so you going pass in the eys there and pass in the image Ur pass in the actual review and lastly passing the review on it right so um here we have to specify the actual image right so image source me right so the alt has to be the reviewer Avatar reviewer profile picture so you can close that up and then yeah we're going to do some styling here as well so the width and height of the image is almost you know very the same right you can come in here and you can just tie it right off so the width can be this and the height too can be that there seems to be some sort of B radius so you can just grab this as well um yeah open it up and want to specify that this should be in a rounded field so that a rounded so this is going to have a cord for us so now we need to be able to have it as a flex right so the Gap we want to specify has to be the gap between this and this which is like 1.88 R if I'm not mistaken 1.88 R so we can easily do that and do 1.88 r as a gap and um yeah that's completely fine we can do Flex column medium flex row I just think this is this way better um yeah I think this this way better um it's completely fine we just see the output we don't like you can take it back okay so here let's play around with this right so this actually have a I think light dark blue not sure oh yeah dark blue so that's the actual review text dark blue and then yeah let's give it some looks bold so font yeah font board let's spell that correctly funb so the reviewer name is yeah so this is the reviewer name so this is not the actual color you're misleading me this is Def the actual color for this right oh it's actually the actual color but it just added someity so let's see let's see what we have is it the same as what we used before most likely so we'll copy everything here we paste it in here we just reduce the opacity you know by some percentage So Pro I want to specify now Pro is actually 0.3 come in here and let's do 0.3 or 30% so so you come in here let's see we not really added our card so the gap between here and here is like 0.81 so what we can do quickly is to you know um put this as a FX fle Flex colum you need to specify that as Gap right so the G 0.81 so you can say 0 81 right well that is good that is very good so go to the testimonial card and we should be able to populate all of this you can do this our review data testimony C we have it imported we have key this is not service we can just say review so review. um you know this is not title just do the image URL image URL review review [Music] review reviewer name reviewer name so let's check check that out okay so yeah it is actually coming up as a Spector we just need to make some few adjustment with the images they're not coming up well okay so this images let's see this more a typo somewhere so we can just remove that and let's see images URL what do we have alland jpj so it's likely that they are all jpg so I could just change all jpg okay okay so the width and the height so the width here is 4 point okay not bad okay 4 point so let's make that make sure that the width is coming out as spect go testimonial card Yeah so basically this the width and the height and then yeah not bad at all so we can grab that and let's put it in the actual diff okay so is it way we we did the right thing before but yeah for some weird reason not sure why that worked so without specifying the actual withth oh this will be too much too much so we have to modify okay so we can actually we need to do that and say the width okay this is the actual W okay so on small screen is really okay yeah so um yeah we actually have a div that covers it is a good thing and it's been squashed by this I think yeah that's supposed to be so I already have a d that covers it M okay so so moving that this just makes it work I think okay that's okay so once you now worry about know displaying it as a grid so this is what we'll be doing be using grid in this case um go to video player section and video player I me testimonial section so here we won't be using Flex right we will not be using Flex here we can as well just remove everything we know maybe um leave the M top so here what we're going to be doing ideally is we're going to be using grid you can come here with grid grid grid columns two medium devices this actually telling G to just have like two um two items per each row right so why for smaller devices we can just have one item doesn't have to be two you come in here and just specify one for small devices it's going to be one so we need to specify our Gap so you could do that it let's check it out okay so that's coming out properly come here and then you see that it is actually coming out as needed right so this this is this is good this is a very good one so and it's extremely very responsive so when you you know um enlarge your browser so it's going to take up that responsive flow and everything will seem you know very fine all right so we can do this and yeah there we go there we basically go right so this is okay for the um testimonial section right and yeah our gap between it can actually be we can modify it to include more Gap in the um in the column ases so let's do that um not sure if they have um colum Gap columns okay let's let's try that out not sure what I do but we can something we can play around with okay not really a thing but it's completely fine if if you want a you know MX top you can really specify that and you know and that would be that would be fine as well so you could just do a team or you can do this thing to give it much more breathing space yeah so yeah this is okay this is fine for the sake of smaller screens we still have everything in motion right so yeah one of the thing weird thing I discovered about this card I think is is's in here so yeah we could have actually used grid as well right so I think from medium it should be one in medium screen doesn't have to be you know too much so we can go to um service section right so do large put large there okay so this is already a live screen that's scary okay okay so at any point in time it will never like break right so it's either you do it this way or you can undo this go to your service card and give a maximum width to it so you canot do um Max with maybe 200 pixel right or minimum yes I think not minimum but minimum with can actually be you 200 pixel so it can go below 200 so you can see that he not really going below 200 in this case but this is 200 pixel so let's get the actual width of the card so could use that to simulate it this 22 pixel so you can just come here and place this right there okay so we have this so you can see what we have now is that we have the minimum cord you know to have that and probably we could just add Flex R yeah flexor should basically like you know wrap it to the next screen but we're not seeing that right so um okay so this is fine weird reason is not wrapping into the next screen so can remove that let's go back to the service section right so um so this is like three yeah so could use grid here easily right so you could just use grid use say okay let's the grade grade columns one for small devices for medium devices it can be two two columns right so for large devices it can be three okay so let me make sure that we're spelling good correctly right so two okay so this still you know fces us back to the thing we've already set here right so the minimum width can be that and yeah so we can actually say oh the minimum width is 22 R oh this will cause some sort of weird overlap by the way so you can take it completely off this is always problematic and there we go we basically have a much more proper view of how the card should be right so I think should be able to like grow through it right so um ideally there should be having you know FES grow okay so first of all we need to make sure that it's really on the here right so we could just do yeah Flex grow so let go should make it like grow through the entire W good good so way better way better so it grows through the width and you can see medium devices is basically hars like you know three um you know um three columns right so small basically have one so large screen it has it like this so that makes perfect sense okay so one thing I want to add here on the service section has not completely there yet is the spacing between here and here is like 9.13 R right . in ring all right okay so want to do not service card but service section let's close up what we have there so let's do n let's do n okay so this is supposed to be the service section service oh no no I meant the testimonial section sorry about that testimonial section you can just yeah you can do that okay so now teson sectionally has testimonial as the title and then it has this as the description so subtitle okay so we basically have this good looking component testimonial what clients say about us right and um yeah so it's well stretched and that's a good one and then let's go to our team section right so our team section is very similar with what we've done before we just have to you know worry about some of the things we may be needing all right so we're back so basically what we're going to do here is to basically work on a couple of things right so we already have our Eder and then we just have to create the cards and then we should be good to go right so um testimonial card so want to do one last test okay yeah yeah exactly exactly as expected okay so there's some issue here I didn't notice earlier it has the issue with the um the actual text you know this text I was supposed to have it you know way down so let's go to the eror section and uh M see it right okay okay so this is z section let's go to page okay so let's do large I this medium medium can be 32 okay all right so that's that's descend as well so just want to make sure that none we don't have issues with you know with with it basically come here we scroll the way down and everything is still in the right order good good good okay so gr here and let's create our team section okay so team section so all I want to do is to grab the um testimonial part just copy everything right so close up what we already have up the section go to new section paste it in and let just rename this to the te section right so this is completely fine I just comment this out first right let's worry about the things we'll be needing this is our team M the team right you can copy that so our team yeah miss the them we could just make this a small letter all right so um yeah so let's have this card let's have this card ready there's no shallow just like some sorts of bers here and there all right so um we move on let's create the card so um before we create the card let's first of all add the things we'll be needing so here we just in the image URL we need the ID and then we need the um profession I think so image Ur in the profession so it doesn't really take much so it's completely fine so may URL the name and the profession so you can remove all of this can remove all of this long string Vanessa this is a name so this is our professional UI designer so the image aror is actually Vanessa so you can see it right here is Vanessa so you call that and let's let's go um not sure how it's spelled but let's just take it um f VA um okay so van double s of course right so this is actually the team data name that real quick the team data and um this is a name this a profession so let's add more of the other team members so come in here and ID can be one right so his name is actually miss cell right so you come here and just change that and change this to miss so UI designer same profession and then the last guy uh the last Lady is I Evans so we can just copy this har evens and then we have the client manager as the profession so I rence and then the client manager so um I need the ex name I so it's okay come here and just do I Okay so um that is completely fine we just have to make sure the card is in order so we basically have to come here and just create the uh Mo code the team code so we can just come here create a team code so team Cod Yeah so basically this is it and we know what we actually expecting specify that in the interface right so need the image URL what is the String we need the the name I think not sure the way we're using it but let's take a look called you are in here so you can just pin this so the name and then the profession so ify name String professional M all right so we can basically structure it and then then pass the actual types the actual type so come in here image I can just space out name profession so this is what we be playing around with and um this is quite all right but we can just create an actual image for it and we should good to go so we have a div let's create another div we can put our image right within here same photo so you come here and then put the um the OD okay same member team member photo so you want to close that out and uh make sure you actually passing in the actual Source the image which is the image URL so you pass it in there right and um the other thing you want to worry about is the names I think yeah so name so you can just come in here and just put in the name and lastly we have the profession so this very similar we looking at it with what we already have here terms of The Styling you know so it's completely fine so come here and just do profession so what we're going to do real quick we're going to grab the the actual title The Styling from the of the other section in the service section to the service card yeah so The Styling actually with reduced opacity um let's make sure I'm in the right place testimonial card yeah can just grab this real quick go to the team card and past it right in here so the name on the other end has to be like the actual title so we can make this way bigger um yeah make that way bigger okay so this is basically it we can just put some uh margins here and there doesn't really matter right so um let's say M8 so yeah giv us a proper margins if can do so the width of this particular element is seven R so similar so makes sense so that's okay we do the same thing for the it and copy that P in there the it and since is completely circular so you can just do rounded full so rounded full this should gives us a much more better stuff so this is completely fine for now so we we still need some know stream media icons here and there okay all right let's do that um so so this icons comes you know after the like the bottom of the card from where I can see here right so I think we should just put it way and you know below the card that's one way we can you know achieve this kind of functionality and it's easier that way so yeah you can come in here diff so paste this in and um yeah put another div so this div basically has to you know account for all of this I think so what we're going to be doing is we're going to have a lot of our images there right so image um so we just call this social icon yeah icon so what we're going to do is we already know um it's just for us to import it I think so we going to move the craes SL images SL um what do we have X icon have X we have the Facebook and then we have dbook okay so X icon PNG so that's the first so with and I doesn't really have much you can just take that off so let's create another one but this for Facebook this time so Facebook icon Facebook icon and I think lastly we have the tribo icon Trio icon so that okay we have the X icon Facebook and Trio icon so um in between we have to specify our separator right so this separator we can easily get it with using sh separator or divider right so um first off let's just see how it looks like before we you know continue to design you can p that close other tabs and this SIM card can take it right in here so we command this right so we make sure we import it so this is a same so we have the image URL we have the name I think see the name and profession so seem the profession so we can actually remove the testimonial cards use anymore and um yeah so when we have this we just basically have to to check out what we have so far okay so this is it not not bad at all so we basically have the veress the name right so the name should be of this color this is the dark blue we have or just to be sure ah the light blue interesting so go to Team card and um yeah the name has to be T dark blue it's already dark blue oh light blue okay so light blue and are you sure it isn't coming over us so light blue is a name opacity no not another that could be what's making it so small so uh we can just make a little bit bigger nothing much that's 1.2 R yeah so I think a little bit bored yeah fun board okay all right so that is almost almost descent right here and we have to reduce the my my can be six okay mhm okay so basically we need to focus on the other areas and this other areas has to do with the actual you know card borders and other stuffs so this is going to be the card border come in here and um yeah come here and do B before pixel B specify the color okay so is there any form of roundedness yeah there is but only like specified you know in here or anything but we can just iBall it and um have that properly in place so we can come here and just do rounded and let me do one R and see how that looks like okay pretty decent pretty decent right so this is okay not bad up we just make sure that everything is you know is moved to the center so you can come in here reflex Colum justify Center so let's remove everything to the Center for us okay so we have this we have this okay yeah um yeah item Center you Center out our items and let's worry about the padding from the top the top is like three Remish so we can just do um py okay so this is actually the first part it's supposed to be here not the other way around right yeah good so um py can actually be through R is okay okay so basically I have that part in there so we have the rounded fix that tyer real quick okay so it's still well rounded and um yeah let's play around our actual icons right so I think this is rounded for the top in the bottom yes so this is rounded rounded top not the bottom so the bottom can still be square because we want to achieve very cool design with what we have on the bottom right so go back to what we have okay all right so since we already have this now we just have to you know um follow up with what we have right so we have it own BS we just have to specify the dividers and then we should be good to go all right so let's see um let's try this out first yeah very similar but I can just so we have the class name paste that in so around it let's try that out mhm so this is B um rounded yeah so you do not specify the B wi which is very important so we have to specify the B WID I didn't do that earlier and um yeah so this one has to be like rounded bottom not the top good good good so um this is it we can just do if if fact if we don't want to specify B um some sort of B at the top we could just do um border top [Music] none part of zero let try that out so that was going to remove the border from the top so basically have our Square in place which is a good thing we just need to position this guys in the right way so um I will actually start by using shots in you know opponents for divider so we could just search for um divider real quick or separator right so we can search for separator so you can see some you know veric separators here which is a good thing so you could just copy this let's install it don't know nothing we've installed here go to npm come in here come in here this your terminal so I'll just make a duplicate of my um my terminal and then paste the code in there so you just paste it in there and it enter this going to download separator component and then we use the verical variation okay so why is actually downloading we can as well just grab the components and put it within our code right within there and um yeah so we want to start using it um orientation vertical is okay so we can place this um after first icon and after the other icon okay so it's downloaded now which is a good thing and um there we go so let's see how it's acting up okay we can't really see in effect yet so what I want to do is to give this some sort of like he I think so let's say it's R so this is something that can modify later on but this is just like we having you know stretch a stretch for it so um yeah so what I want to do is to make this a flex Flex justify between I think so basically I have this and um yeah so the icons are way too smaller so just have a way to make sure that they they actually at the center first right so um this is not bad not bad at all um one I want to do is to give it a width it looks extremely small you know let's give it a width of can give it a better WID give it a very good width so you can come here um okay something like this I think come here and do do class with five R Pi L as a Two Rim okay still very much is later 1.5 ah it's okay 1.5 is not really bad we just want to be careful so we don't won't have it completely pated okay so that is okay and one other thing we want to you know try to do or strive to do to make sure the width is a little bit like fatter right how do we achieve that we can as well just make sure that the color or what pass into here is of the same color as the as the Border we're using so we're actually using this border so we'll be passing in the same color right so and then I think the width uh with so if it doesn't pop up um yeah so the width is okay um maybe bre a little bit let's match the actual design what's the WID here is 0.125 R oh not that 0.125 R okay 0.125 Rim it's very tiny it's very tiny so I think it's okay what I did before probably reduces a bit by four pixel okay so that's that's not bad that's pretty decent so we can as well just grab what we have here in our separator and paste it in the other part should do same for yeah same for does think yeah so that's okay and can remove this I want to make sure that it's a little bit smaller so I can just you know assume that it's three so three should be fine okay so then we can still notice that our icons are not really doing proper job here right because they are all way to the left right so let's see if there's a way we can make that you know better so let's say justify around okay so jusy I'm basically position it at the you know not the exact center but a very reasonable um Center position right so um I think this something we can go with yeah looks looks you know perfect already and um yeah so on a very um large screen we should be having three of them in one row so this something I will go to the team section and quickly modify it so we have column one MD col 2 and large we columns three so you can basically have like three of them in one row okay so one thing is the height we have to reduce the height is weight so much and the height between here is just the height here is 3. 68 so you can use this exact height without much worries so you go here and U go to the team card and this separator should have not the separator per se this entire thing should have a very reasonable I 3 right okay so you can actually see that since our I is reduced it makes our stuff now looking way bigger than expected so that will actually make us to remove what we've done earlier which has to do with um you know possibly passing in the WID so it we can just like comment out of this first and let's see how it is okay very good go so we don't need to specify any with so we won't encounter any form of isolation whatsoever we can remove that and then yeah so basically I have the theme cards so let's check the responsive poers of it you can see that extremely very responsive so we're using GD here making a very very great tool to use so it is very very responsive and that is a very good one so we can come here make it way smaller you can see that everything is still coming up as expected so this is one way we're able to achieve this Dynamic design right all right so this is it and um yeah I did notice that the spacing between here and here is way too much let's check the one we have 3.31 let's see the one we actually you know gave them oh is n r no not that one I think this one okay so 3.31 R okay so that's that's pretty decent and the [Music] mobile okay good meet the team these are our team members good to meet you guys okay so we are in the penultimate section right so this is a newsletter section so let's quickly create this and um yeah so let's go we already have what we need we just have to you know copy the way we normally you know where we've done earlier so you go to the newsletter section paste everything in there change the [Music] name so news letter section right so you can remove all of this data you don't need we won't be know creating card in this one okay so we can remove that and this is our team and this is subscribe our newsletter so you can p this in remove this and yes this going to be out same so same so this one basically has a couple of other things that we need to worry about and it's particularly straightforward so just have two DS one on the left and other on the right so um let's do it so you don't need to specify G or whatever you can as well just remove all of this it's not a a requirement um so what we're going to do here is that we can have those two divs the first div should have to be an image actually she is definitely going to have a source SL Images slash this is a newsletter large icon icon.png I I think so the alt new le icon um or image small F image really um envelope or large yeah large envelop image that's that's completely fine and then what else do we have we need to worry about what we have on the right right so we just have couple of paragraphs right so a couple of paragraphs here so let's see can copy that okay so we need the input not sure if we already have some input but um if it's something that we don't have we can just create our own custom input so let's check our common folder component common okay we don't really have an input yet so but we can create one so what we're going to do go to shart scene go to input right this is a very good input so you can come in here and just copy the mpm part go in here and paste it right in there so this is going to install the input component for us okay so if it's it's done installing we're going to move on to the next stage so while we wait for it to install we can just proceed with what is expected here right so um we need a couple of things that has to be the first paragraph the input and then the actual button so um there we go we already have the input paragraph need to put the input there right so this in is already installed we can paste it in there or we can just just grab the default one from shots in right so we can just grab this guy so you can grab that and put it right here and now we've already imported it which a good thing yeah so we're almost done we're done with ch issue so then we need our last button for this one we need to make sure that it's taking the full width of the of the div so basically we need to do our main button so we have it imported and passing your text prop so let's give a value for it so the value we see here is subscribe our newsletter so we'll have it placed in there and um yeah I think the size okay so not really show you size is the full width um the width yeah so the width is actually the full width so WID can just be full width or four sry so full width which is okay okay not full on scope width but full WID all right that give it a very good full width and then this is the place order so we can copy that and place it under the place order um prop right so let's see how it look looks um conditionally right now okay so you can see that it's coming out well one thing we need to worry about is the um I think the the ugly border we still see some sort of ugly border and then the B radius doesn't seem quite good so we can actually modify this by specifying an height to this right so you can just make a new class so the it we pass in the actual height that we white that we need so this is going to make it way bigger which is okay and we have to round it so B radius is like 3 point this a very large B radius so we can actually do that and just put rounded okay 3.06 right okay so that's looking quite all right okay your email here and one thing I feel might be needed is the actual Shadow right so Shadow large doesn't need to be the exact same one but you just want to give it some sort of Shadow right come here or you can just grab if you need an exact Shadow you can grab what we have on the figma and go over to your Global size so if you're using in line you know in P styling that would have been nice as well but for the sake of this tutorial we can just put them in our Global um Global Styles so we can just let me close it up go to not public go to socks um app global let's call this um um newsletter box Shadow okay so this newslet Bo Shadow you can just grab it and then go to the newsletter section and paste right here so that will give it the exact same Shadow as as required exactly and yeah so we just have to make sure that the you know but is taking the actual primary color so what we want to do is to go into the input CH scene component um not yet sorry go into your Li UI folder so UI folder is under um the library U not the library the component then there's a UI folder and you see your input so here you want to make sure that the ring is a proper color so this is the ring offset right so we need to make sure that the ring is in the proper setting so we just do ring so ring of set white okay so ring slits all right so I think um originally we can still do some sorts of stuff but I just want us to do it through here first before worry about about that so dark mode is going to be like that dark mode is going to be like that [Music] okay so let me try um [Music] ring so link of set yeah of white still primary all right let's try that out okay we still have some stuff going around it right so let's see oh the border the border is not really like expected so I'm going to undo that let me go to the B uh's our [Music] primary okay so um we still have you know some issues with it for some weird reasons um okay so let me quickly you know check why this is happening okay focus visible ring two Focus visible ring primary [Music] mhm so we can just take that off mhm let's see what we have so not sure about the B I take that over as well okay so we can actually leave the B and what I'm going to I'm going to undo all of them and I'll know where the problem is it's actually is from the um focus visible so instead of ring two could just make it primary the same thing here I think right so okay so which one now we have so is it they are both the same so you can as well just take one off okay so it's not coming out well not sure what's going on there let's refresh it okay so I think um in our previous lesson we did something very similar so what I'm going to do real quick is to open up that lesson so we can go through it as required so go to the Repository okay so in the tri agency landing page we did something very you know very similar and that because when you check the source folder right go to your components I think go to the UI and go to the input yes we did something very similar somewhere around so I just let me just grab it and put it right here so we won't have to won have issues to much oh exactly so this exactly what expected so if I get it right whatever we're using um primary oh Focus um focus visible ring primary exactly you can still leave it at ring two for just to get the um the Box Shadow I think oh yeah yeah that's why it didn't work so that makes perfect sense all right so this is it we basically have input now we can reduce the you know length around but this completely fine for now let's align what we have so far so we have Flex right so let's align things for us and then let me make sure that is actually Center it is going to align it vertically first and one of the thing with my need is the gap in between gap between here and here is like 1.44 right so you could just do so 1.44 R right so the guy between here and here is like 3.19 R so that's very straightforward so you can come in here and just wrap this sort of diff so 3.12 R I think so I'm going to grab this okay so this makes perfect sense so our shadow is coming up as expected right so we can actually reduce the width of this of the item mean it seems to be way too much so we can actually ruce the he so maybe 3.8 okay something something around around that so that that pretty decent okay so let's see we already have this newsletter section one thing we want to make sure of is if it's responsive right so yeah so what we're going to do is to make sure we do the um no flex right so Flex column for small device and then the flex row so they should stack it originally on a very small screen and I will make this image a little beit smaller on small screens right so MD with full but small screen we just do with five frame okay so five R too small let's do 10 R okay so this pretty pretty decent for a very small screen we can leave can leave it like that and um yeah this is our image so this is whens are lighted right for large screen this is the way it should be so what we're going to do is to basically I think this is a very bold one B font I think you're using robot okay so it's completely dis um decent so you could just do X nor right so text going to do that is it B it is to B I think so one semi board okay so this as okay for us little board right so basically have that and then our team subscri to our newsl so this this like not should be our team should be just be obviously newsletter or our newsletter I think our newsletter so that a typo design we'll just fix it real quick our newsletter subscribe to our newsletter and then yeah this is on cool way we can achieve it and lastly let's quickly design what we have on the and on the um footer it's pretty straightforward you can just do it real quick okay so we can come in here close off all the things we do not need so we're going to close them all off and close this close this so we're in the foot section well um before we actually start this I want to actually use this medium to appreciate you guys you know for you know for subscribing for sticking sticking around it's been quite of a journey right but um I've been actually loving the feedback I get every now and then and thank you guys all right so the basically we have the photo section so we want to make sure that we're able to you know map it to this particular um what we have in the actual design so we have a couple of things right it's just D div so we could just call this a section since is actually coming in a section orig so just create our diffs so now you can see that we only have a couple of three diffs let just keep it as that this can be an actual separator all right so this is the actual separator and um yeah so basically have three Dives and yeah should be good to go so we grab this text and put it right here so this is the first div the first basically has a couple of things right so we need the actual logo it should be on so you come here and just call this the full logo and once you want to do want to do slash Images slash then the actual name we called it so go to public images and I think you should be able to see the full logo right there so can go in there and just do hold logo PNG right so we basically have another thing this is just a text copy it and yeah past it right here and paste it right there and lastly we have some a div that contains you know some paragraphs so you can just use another list it doesn't really matter so we have the portfolio we have the how it works we have the prizing and we have the about and I think finally we have the login so this will all be links you know let's through you can use the nextjs link um component to wrap through each of them and that will be you know pretty impressive so and when we done we just want to make sure that everything here starting from here I think going to have the the actual color so this is the class name you over let's say this is the color we have this should be in our start guide already light blue say call is text lights blue right so text number yeah text one right so that should do it for us so use effect only works in client component okay not sure oh probably sometimes I think the separator require some sort of like you know this kind of thing I run into this error some other time right so let's make sure that we are oh this is not it this is not the one we are actually importing it's from the wrong route we need one from the UI the UI [Music] itself so refres that okay let's scroll down and there we go our image is not coming up that is that is strange so let's see why it is not coming up so this is actually fter phore logo the PNG images mhm so that's supposed to work that seems quite all right okay yeah it's actually coming through it's there already so I think the weird part I'm seeing is the is obviously all this part I think right so this section so we just do class Flex let's on yeah so there should be a very consistent gapping between both of them layers 1.9 r G to specify the 1.9 Rim G okay so that's okay so the exit lap oh okay I see the copyright it copied was not copied correctly I think so that was breaking it I think um it still looks broken not sure why we experiencing that this is a flex as one thing for sure um that should put everything horizontal and so let's make sure that is is a full width kind of th okay so not sure why I'm actually seeing you know let me I just comment this out let's deug it all together yeah I can see so um the copy whatever then 2020 H whenever we do the 2020 just goes crazy yeah can we make this a diff so won't be less problematic all right so let's make this a div quickly mhm yeah not sure h okay okay so um let's take this off we need to investigate why that is happening let's take it off now yeah so let's see how we are able to stretch this to the very end so the width is full right and um yeah so what I want to do is to make sure we can just like justify between what we have you know and flex G four right and um let's see mhm make the a little bit bigger okay so this flexum I think separator okay yeah let between mhm so now we want to make sure that this guy we're able to retrieve this guy I think so let's go and do our 2020 H so it seems the font doesn't really play well with numbers I think right so um probably use a different font form here font siif let's check that out yeah I thought as much the phone doesn't play well with numbers and that was very weird as look so um yeah so I can do that and then yeah passing the actual stuff I will just copy it again and I can have it pasted right in here okay so we could just do that right so because the phone doesn't really allow us to pass an actual number so that's completely fine so um that is it and then then the last one is in here right so we already have a custom grade text we can pass in there can create a cur text custom gray I think okay yeah so there are some margin in bottom you know from here to the bottom is like 2.56 so you can come in here and just do adding button 2.56 R okay so that's almost very decent and we need to put a proper spacing between here and what we have here so it's like 10.44 R okay so we just do 10.44 right okay so this going to like push it down and then yeah there we go we need to check how it is on mobile is very important yeah so this is it just do Flex colum medium flex row so this should be able to stack it up for us right and flex row as Gap it give it a proper gap it okay this is how it's going to be on a very small screen which is okay right so this is it and um of course we've actually built something really remarkable today so we can actually go through it again to see what we've created so we can actually see okay so um yeah so with these we've come to the end of this um lesson and um yeah thank you guys and catch you on the next one

Channel: NewAwesomeTech

Views: 5,214

Keywords:

Id: Tt6OqNiQSPI

Length: 181min 42sec (10902 seconds)

Published: Sat Dec 30 2023