Trigr Landing Page Part 4 - About Us Page

okay we are cruising along and we are at part four right now and we're going to build this about us page today now one thing that i've just noticed and that we didn't do in the last video is that notice how there's some kind of navigation indication right at the top so when we are on the about a space then we have this about us link lighting up in green and then when we are on the get started page we have this lighting up in green and then when we are on the homepage then this lights up in green and so on and so forth now i'm also going to do that in this video and i'm going to explain why because what you notice in the last video is that when we go inside our components and we go inside i think it was the header right we had the nav link and we didn't use the the link that comes from react or the dom as well we use the nav link component now i'm going to explain why we needed this in this video and actually we're going to do a practical example okay as always if you want the repository then the link is going to be in the description you can go ahead to my profile and the pro the repository is called trigger and you can just go ahead and clone this so you can download the zip file and then once you extract it then you'll need to say npm install and then npm start which will start your development server on localhost 3000 and this is what i have and i'm running it in my terminal right here on localhost 3000 okay and just to confirm that our navigation is still working we have the about the space we have the let's talk page we have the get started page right there okay fantastic now let's go ahead let's go into our header component right now right here i'm going to add an attribute or a properly this is a prop because there's a component that is called active class name active class name now what this means is that these styles will only apply when this is uh it is the active class um how do i explain that when well for example when we navigate to the home page then these styles are going to apply because we are on the homepage if we navigate to the about us page and i'm going to add active class name here as well then the styles here are going to apply when we are on the about us page now what we need to do is just say text green dash i think 500 should be fine right and then let me do that to this as well so let's say come on text green dash 500 so let's save this and then let's see what we have now look at this we are on the home page right now this lights up as green and when you go to the bottom space now we might encounter a slight error and i'm going to show you that error and how to fix it so look at this we're on the about us page so this lights up in green but notice this even though on the about this page then the name for the home page which is technically this still lights up in green and we don't want that so let's first add this to the to the let's talk page right here let's add this copy database and then let's go into let's talk and look at that so that's looking fantastic right so what we need to do is that remember how in our app.js okay remember in our objects we had an exact prop on the path and this basically means that only when this path matches the forward slash that's when you're going to render the hero component right the same thing we need to do the very very same thing right here we just need to add the exact prop here which means basically only when it's it's the first that's then the styles are going to apply so let's save this and let's see look at that now it's longer highlighted as green and so on and so forth so we just need to add it to the get started link as well so the get started link is the button component so let's go into the bottom component so let's say active class name and we're just going to say text green dash 500 now this might not work okay and i actually think it won't work okay so let's save this let's look at this okay of course it doesn't work because this shouldn't be here and let's add it on the top this should work let's see nope not yet but then that would mean that we need to reset a bit of the stylings inside here so index.css let's find where we have our big button where's our button right here so let's say let's say cta and btn um now let's just call this class active btm okay let's call it like this let's make it common case and then let's just say background color we're just going to reset this style so we're going to say background color set this to transparent okay we're going to say butter rest can remain we're going to say border um we don't need a border so let's say that none let's say padding is going to remain so the color is going to be um what's the talent color for green let me just look for that tailwind css colors i forget the heads of values so let me say this one 10b 981 okay come on 10b i need one okay that's the tail in green unto it can remain family fun family can remain font size and so on and so forth so let's save this and then let me see if this will work okay so let's see if this will work so active class name let's say dot active are not that but active btn let's see let's see it started still doesn't work still doesn't work let me remove this so now technically this applies okay that applies but we don't still have the the button class oh this doesn't seem to apply so what i'm going to do is this tells inside here i'm just going to remove this class name of btn and by there i'll just move this to the other side okay i've just moved it before the active class name and what i'm going to do is let me test something let me just say bg white let's see okay okay okay so maybe it's because we have the stairs in our index.css file and that's why it doesn't work so let's just fix that let's go inside here let's say bg green dash 500 let's say py2 px 6 rounded and add a box shadow just really add the styles as they were okay look at that look at that now when we're on the about us okay now that that seems to apply that seems to apply as we wanted to actually so let's add a transition let's transition all let's say duration does 300 let's have a hover state where we're going to say bg transparent transparent and then for the hover state let's say text green dash 500 and then i just want to add a border of green dash 500 so that when you hover over it then the button is going to have a green border okay so let's see and we need to say border dash but actually this one there we go fantastic yeah i think this that looks much better and it works as we expect it to work so let's go into the about us page and let's begin building so let's go into into our about us with our batters about us page right here and then we need to import an image which we don't currently have so i'm going to just say import about from dot slash should be about let me just say about dot svg which we don't currently have now what i'm going to do is i'm going to grab this image from figma okay but remember like in the first video you can head over to andro let me say and draw.co and i don't remember what i searched for here i i actually don't remember but let me just see if i can find it let's just say rubik's cube let's see rubik let's say month okay so this is this is the svg image that i used now when you search for month i don't know whether you can have one easier you want to search for this but this is the svg image that we used and once again if you want to change the color you have to use go right here and then select your preferred color okay so you can head over and download this as an svg i'm just going to grab mine from figma so let me just do that let's say grab this and export export as svg okay let's export it into desktop work and let's say where is it it's called trigger okay into our source folder and right here so let's say about dot svg and while we are here actually let me do that for the contrast page as well so we need this for the contactors and let me see if i can find this one as well so let's just say contact search for that and here it is so this is the svg image once again you can change the color to your preferred color fantastic so let me grab this let's say export this as svg let's say contact okay fantastic and i think those are all the svg images that we are going to use in this project now let's go ahead and close this place this to the side and let's begin building so we have about this dot svg where is it about an svg right there and probably you want to put these images into a folder so that they don't clutter your workspace so let's return a section inside here and you know what actually by the way you know what this is most likely going to be the same way as our hero section okay so let me go into components let's go into hero okay let me copy all of this so just grab this and then let's go into about us let's return this okay probably i'm going to change these styles i'm still not sure let me see what i have for the hero styles right here uh where's the hero we have hero overlay and da da da okay so let me let me know let me not return these class names and then of course we don't want this h1 and of course for this section we want the image to come first okay so we have the image to come first i'm moving it by just selecting the text that i want and then holding the alt key and moving it up or down okay so we have the class name we have this we have the h1 that says what why does trigger exist so say why does trigger exist and then below this we have a paragraph that says this let me just copy it and paste it here this is just some random text if you're in vs code all you can say is you do something like long 20 which will generate 20 uh dummy text for you okay and we don't need the button component here so let's move it and this should be it so let's save this and this is not here this should say about like so okay fantastic now let's see what we have on the screen and we have this looking amazing so let's begin starting this out we are using 10 so let's say padding y of 10 by the yanks of five and actually how much padding can i have on both sides say i don't remember let's say get started what did i have padding on five hold on okay that should be fine okay you can close this and close this and then let's go inside this uh is it inside this div let's say grid and grid columns one so display them as a grid with the gap of five let's see how that looks fantastic and then on medium screens then we just say grid columns should be two okay so let's save that let's go inside this h1 font ball let's save text for xl increase the size let's say margin bottom of five pushed away from the text probably we can say margin top of five as well just push away from the image let's imagine top ten okay and then for medium screens let's reset the margin top to zero okay and i'm going to show you why that's necessary just so that it doesn't push away downwards more than the image okay but the progress did i add the line height on the paragraphs i should actually do that because the smaller the the smaller your screen becomes then the greater the line height should be just a principle of design let's see you know index.css let's see the paragraph where you i didn't have the paragraph line height so let's just add the paragraph line height i'm going to say for every paragraph then the line height should be let's see how 1.8 looks it should be fine 1.8 is fine okay that's amazing now what phone did i import i imported the 400 and 700 okay that's nice now that we have this let's just see how this looks on larger screens and that's all we need to do actually so let's increase this right around there look at that right on there then it goes to fullscreen right now we i need to um just adjust it just a bit okay because i don't want this to happen and probably you know what you know what it can do what you can do is right around here then we can add a margin top so that this pushes downwards even more right just go right in the section let's say for media streams the margin top should be 20 how does this look 20 should be fine okay and then let's say for large screens now i want to do something different here okay i'm going to say that for large screens actually let's say for xl screens then i want this to be a flexbox okay flexbox which might just mess it up just a bit just a bit look at that you see that so flexbox let's say um actually is that a good idea no i don't think that's a good idea i don't think that's a good idea what you can do is just say item center so that this moves downwards so let's say that for large screens let's say items dash center which will push this downwards there we go so we have that let's say for large screens again let's increase the gap to 10 the grid gap to 10 there we go and what else yeah i think that's actually it for this uh for this um i can't think that's it for the about us page so we have the home page looking fantastic and probably i want to remove this background i don't i'm starting not to like that that this slide background so let's go into index.css and let's go inside where is it um should be the hero overlay let's just remove this background color i'm starting not to like it because it interferes with the flow of the entire page now probably um i did something wrong because as you can see this this color is not matching this and this and this and so on and so forth that's because we switched to tailwind after we had our uh our global css okay so i might fix that in another video but not this video because it will involve quite a lot of tweaking here and there and so on and so forth so in the next video we are going to deal with our contactors page and i hope to see you then bye mm-hmm [Music]

Channel: tsbsankara

Views: 68

Rating: 5 out of 5

Keywords: HTML, HTML5, CSS, css, css grid, css flexbox, javascript, es6, es7, react, reactjs, frontend, front end, web, web developer, web development, netlify, vscode, tailwind, tailwindcss, tailwind css, tsbsankara, trigr, trigr landing page, trigr landing page challenge, trigr challenge, reactjs landing page, react router, react routing

Id: G0RcyHo038Y

Length: 15min 22sec (922 seconds)

Published: Fri Sep 10 2021