All language subtitles for 24. About Us Page - Setup

Let's begin working on the About Us page so we'll get it finally from our dummy component into the full

design that we see.

And it will start like usual by coming over to the components folder and we'll add in about about Dot

J.S. let's import react from react along with our import for make styles and use theme from material.

Dash UI slash core slash styles.

And then we'll import the grid from app material dash UI slash core slash grid and we'll import typography

from app material dash UI slash core slash typography let's come down and we'll create the constant

use styles with make styles calling the theme arrow function return object and then export default function

about and then open it up create our concept classes equals use styles and concept theme goals use theme.

Now we can return a grid container with a direction of column and this will be the wrapping grid for

our entire page we'll start off with a grid item.

And this is going to be wrapping a typography variant of H two and this will be for our title about

us then we can come down and create an adjacent grid item and here let's create a typography variant

of H four and we'll give this a class name of classes dot mission statement and then we'll open this

up create a new line and what's open up the design file and we can come up to the About Us page should

be somewhere up here.

Here we are and we'll go ahead.

I can make this a little bigger we'll go ahead and copy in the mission statement.

So copy that text come back and we'll paste that right in.

And before we even save this I'll go up and let's add our mission statement style with a font style

set to italic a font weight set to 300 a font size of one point five or rim and then a max width of

50 m and a line height of one point for all right.

And that will get our mission statement looking correct.

So we can go ahead and save this now and let's flip over to the app dog J.S. file where we can scroll

down and let's go ahead and copy the render prop off the revolution and let's replace the component

prop for our.

About us dummy component.

We'll paste in that render prop and we'll change revolution here to about which means we need to come

up and under a revolution we'll import about from dot slash about and we can go ahead and save that

in our page we'll refresh.

And now you see our title here on the left along with our mission statement.

Go ahead and close out of app dot J.S. and let's move that text to the mission statement over into the

center by providing our variant of H four within a line of center so we can save that.

And we'll see that the text has now become center aligned so to move the actual text over into the center

of the page.

Let's change the wrapping grid item to a grid item container and then we can set the justify property

here to Center and then we can save that.

And we'll see the page refresh and it has now jumped into this center.

This looks good.

But let's actually go back to the revolution page real quick.

We'll open this up and what's copy.

The row container style that we're using here and then let's flip back to the about Dot J.S. and underneath

the mission statement style.

Let's go ahead and paste the row container style on in then on both this grid item wrapping are titled

typography.

We can add the class name of classes dot row container.

And then here I'll also add a style of margin top to M so that we have a bit of more spacing up here

between the title and the app bar so we can go ahead and save that now.

And we will see the title has now jumped and has the spacing here on the side that we had wanted and

then we can go ahead and on the grid item container.

There is wrapping our mission statement.

Let's add the class name of classes dot row container as well.

And now we can save that and we will see that there isn't really an effect there because the spacing

here on the side is already greater than the padding that we're providing.

But as we get closer you'll see now the padding is pushing our text inside of it where we would want

it.

I'll go ahead and refresh this up to this size though.

And now we can start working on the next part of this page which is the history section.

So adjacent to the row container for the mission statement what's add a new grid item container with

a class name of classes dock row container.

And it will open this up and have it wrap a grid item container itself but with a direction of column

and then we can open this up.

And the first grid item within here will be our typography variant H for more add the gutter bottom

prop.

And this will be for our title of history underneath this grid item.

We can add another grid item and this is going to wrap a typography variant body one with the paragraph

prop and we'll set a style here of font weight 700 force style italics actually adjust the italic and

then we can go ahead and open this typography component up.

And this will be the sentence we're the new kid on the block.

Let's go ahead and save this now and we'll see the page refresh and then we have the beginning of our

history section.

You see the font weight of 700 gave us that thicker style here and the font style of italic obviously

gives us these slanted italic look.

We'll go ahead and underneath this typography component let's add a another typography variant body

one paragraph but then we'll just open it up like that.

And now let's flip to the design file and it looks like we'll need one two three four.

So go ahead and copy that empty typography pasted three more times and then we can go in and paste in

these paragraphs or sentences I should say

all right.

And then we'll minimize that again go ahead and save this.

We'll see the page refresh with our text in place.

Now let's go ahead and outside of this grid item container direction of column wrapping.

All of that text will create a grid item adjacent to that.

And this is going to be wrapping our image with a source of history and an old of quill pen sitting

on top of book.

We can close that image tag off come up to the top and underneath our typography import let's import

history from our assets folder.

History Dias v g let's go ahead and we can save this and we can see our history image has has appeared

but it's not sharing this space with the text it is sitting on its own new line.

So remember how we fix that.

Go ahead and on the grid item.

Let's give that the large prop.

Go ahead and on the adjacent grid item direction column we'll add the large prop as well forcing these

items to share the line in their space until after the large break point.

So let's go ahead and save that file and the page will refresh.

And now we're getting a shared space.

If we go ahead now and we resize this page up you can see that the history section is actually staying

too close over and next to the text.

We'd really prefer it to be over here in the middle of it's half of the screen.

And so to do that all you have to do is come over to the grid item.

And since we want to control the icons position within the space available to it let's make this a container

item and then we can set the justify property here to Center.

OK I'm going to resize the screen that you can see.

And now I'll save this and you'll see that the image jumps over to the right and it is now centered

within the middle of it's half of the screen.

But we also had a little bit of distortion there occur if you noticed the image is a little bit stretched

out long ways.

So we need to come on to our image tag and give it a style with a max height of twenty two m we can

go ahead and save that.

And the image will jump to a more proportional aspect ratio let's keep going and we'll add a max width

to this item with all of our typography is so that they don't spread out quite as large as this.

I think that's a little too hard to read.

It looks a lot better entire tighter paragraphs like that.

So we'll come up to the item container direction column and we'll apply a style where they max width

of 35 m.

Go ahead and save that and we'll see the page refreshed and now no matter how large this is we have

very nice looking paragraphs.

This causes an issue though because now the history section and the icon they're no longer centered

properly on their page and they both are appearing to the left.

So what I would like ideally is for them to have equal amount of space around them.

So obviously I'm wanting to use the space around property but if we come over and if we add on the row

container that is holding both of these items and we give it a justify of space around to distribute

that space let me increase the screen size here I can save the file and you'll see nothing happens.

OK.

And the reason for that is that these are both grid item containers right.

So they're both taking up 100 percent of the space available to them.

And when you're doing that that means you cannot move them around with these properties at least not

horizontally because of that width of 100 percent.

So to get around this.

Well I can do is we're going to wrap each of these grid item containers with an item so that that item

will then be affected by the space around.

But the content inside will be preserved with our item containers max width and direction of column.

But by wrapping this it will allow the container to then move these around as if they were not containers

themselves trying to take up the whole space available to them.

So hopefully that makes sense but we'll go ahead and we'll wrap this with a grid item.

So then we'll come down let's find the closing tag underneath underneath here at our slash closing grid

and then we'll wrap this grid item container wrapping our image also with a grid item will come underneath

here you know at our slash grid.

And now if we save this we'll see the page jump and the content was correctly moved in the right place

thanks to the fact that it's applying this space around to the grid item and not to a container.

So this is looking good so far and there's already been a couple new little tricks that we've learned.

Like wrapping that in the great item so hopefully you're getting more and more comfortable with creating

these complex layouts but we'll continue with the team section for this page in the next one.