All language subtitles for 19. The Revolution Page - Technology & Vision

We'll jump right into building the revolution page by coming over to our components folder and let's

add a new file called Revolution dot J.S. here.

Let's import react from react import make styles and use theme from material dash UI slash core slash

styles and then we'll import the grid component from material dash UI slash core slash grid and import

the typography component from material UI typography then let's create our constant of use styles with

the make styles function calling our theme then the arrow function that will return with an object then

we can export default our function revolution Lu Shen open it up and create our constant of classes

use styles and our constant of theme use theme.

Now we can go ahead and return a grid container direction of column for our entire page inside of here

we can add a grid item wrapping our typography variant of H to saying the revolution and now let's go

over to app dot J.S. and let's import the revolution from dot slash revolution and we'll come down to

where we have our revolution dummy component and let's go ahead and copy the render prop from a previous

route and then we will replace this with the render prop and Change website to revolution and now we

can save this and then we'll come up to revolution dot J.S. and we can save this file as well and so

now if we come over and we go to the revolution page you can see the text is still the same.

That's because I need to go ahead and refresh the page get my server up and running again and you can

see this styled text is there let's tweak this title though because we know that in the design file

has that special font so let's add a style here of font family Pacific code and then we can save that

and Page will refresh and we now have the correct font I want to come over to the custom software page

real quick and let's actually grab the RO container style and let's go ahead and copy that.

We can close out of custom software and let's go ahead and paste that into our styles object here.

Now we can come down and on the grid item where we're wrapping the revolution typography component let's

add a class name of classes dot row container and we can save that.

And we'll see it jump.

And now we have some padding on the left.

We also need the spacing along the top though.

So let's also give it a style of margin top to M and we can save that to see the spacing.

Now take place we can continue now and start working on that next section with our vision icon and text.

So we'll come down and underneath this grid item let's add a grid item container with a direction of

row and a class name of.

Classes dot row container.

Now what's open that up and we'll first have a grid item and this will wrap in image with a source of

vision and then Ault of mountain through binoculars and then we can close this off.

And now we need to come up and underneath these imports let's import the vision from our assets folder

vision SPG let's save this and we can see now that our vision image is popping up on the page.

Now we can get that text on the right set up.

So in the same row but adjacent to this grid item wrapping the image let's add a grid item container

direction of column and then open that up and we'll put in our first grid item with the typography component

variant H for along with the gutter bottom property and then we'll close that off and insert the title

vision then we can add another grid item so grid item and this will hold the typography variant body

one paragraph for all of our paragraphs.

Let's go ahead and copy that real quick and open up our design file and it will come up over to the

revolution page scroll all the way up.

And here is our vision paragraphs and we'll need one two three four five.

So it's copy this paste it four more times.

One two three four.

And then we can go in and copy in our five paragraphs.

So the first one go right here this second paragraph.

Paste that in.

Grab the third paragraph.

Get that in there copy the fourth and get the last paragraph.

Paste that in and then we can minimize our design file.

Save the page and we'll see this refresh.

And we have our text we can start working on this by making these items actually share the space in

that row so that they'll be on the same line and instead of stacked on top of one another like this.

So what's come up and on the grid item here for wrapping our image let's add the large property and

onto the grid item container direction of column.

We'll add the large property as well.

So like the medium breakpoint property.

This will tell are grid items to share the space available to them all the way through the large breakpoint

but underneath it then they can stack on top of one another.

So if we go ahead and save that we'll see the page refresh.

And now our two items are sharing the space and sitting side by side.

We need the image to be censored down more though we want it to be centered vertically here with the

text.

So if we want to move it down and have it centered vertically and we're in a container with a direction

of row.

So the main axis here is horizontal.

So if we want to center this vertically we'll need to adjust to the cross axis which we can do with

the align line items property so we can set this to center and we can save this and we'll see now they

are icon did indeed jump to the center so it's good so far but we don't want any of this text here to

be left aligned seeing that it's on the right side.

So let's go ahead and even on the variant of H for typography component for the title let's add in a

line of right.

We can go ahead and let's copy that value and paste that onto all the typography is for our paragraphs

as well.

Once we get that we can save and we'll see all the text has jumped over to the right side.

Now I'll show you if we go ahead and make this screen all the way large.

They are text is definitely spreading out too far and this makes it very unreadable when it's all spread

out like this.

So let's shrink that back down and on our grid item container direction of column.

Let's add a style here with a max width with of 40 M and then I'm also gonna want to come up and on

our actual image tag.

Let's add a style here.

His style as well with a max width again of 40 m but I also want to give it a margin right of 5 m 5

am and that's so that we're not going to be pressed quite so close up against the text here.

So if we save that we'll see that that jumps and the icon is actually now slightly smaller.

So I don't know if you can tell but it is a little bit smaller and I think it just makes it look a bit

better the next part of this page is pretty similar to this first section because instead of having

just the image on the left and the text on the right we're going to put the text on the left and we're

gonna put an animation on the right.

But this structure is very similar so let's actually go ahead and find this row container and let's

go ahead and copy.

We're gonna go ahead and copy that entire thing.

So Copy that.

And now underneath it make sure there's only one grid tag underneath you and paste that inside the first

step we'll do is come up and copy that grid item large wrapping the image.

Let's cut that and come underneath find the closing tag for the grid item container direction of column

and paste that grid item underneath.

Now what's changed this title from vision to technology.

And then we'll bring up the design file and we can come over and let's copy in all of these paragraphs

as well.

Real quick

okay.

And it looks like we'll need to copy the typography component paste that two more times so that we can

get these last two paragraphs in and get those

okay.

And now we can actually go and since this is now going to be on the left side of the page let's get

rid of this a line equals.

Right.

We're not going to need that.

So we can close all those out of here including the one on our title.

And now let's give it a save to see where we're at.

We can see this popped up and we've still got the same image because we didn't change that but now we

do have all of our technology paragraphs as well as the correct alignment.

Since it's now on the left side so we're already pretty close but let's get this image changed to our

animation and we'll start by coming over and on the landing page.

We can come over and let's grab the default options constant.

So we'll copy that from the landing page and then we'll come back to the revolution and let's go ahead

and paste that under our constant of theme and then what's come of an under vision will import technology

animation from animations technology animation slash data Jason.

And now what's passe in the technology animation to our animation data and now we can come down and

where we have this image for the vision let's get rid of this and replace it with a lot of components

with the options set to our default options and then we can close this off.

And now we need to go back up and let's import the lady component from react lady.

So now we can give this a save.

And it should refresh.

And now we have our animation here instead of that icon.

And so this is a little animation that I made with just little different pieces of technology kind of

in my head how they've sort of progressed from it like a club just a stick to fire a hammer we can make

things and we had photography made calculators which turned into computers which turned into our cell

phones.

So that's just a little animation hope that makes sense but I'm gonna go ahead and I'm going to add

that is stopped equals true.

That way they won't continuously keep playing so we'll just see this big club right there to get to

a good stopping point real quick.

Let's go ahead and we'll add a style to this audio component giving it a max width of 40 M that way

it never gets quite so big because here it is very large.

So we can save that and it will refresh.

Now it's a little bit smaller but now let's come and we'll increase the size of this page and you see

how the alignment isn't exactly correct.

We've got a nice spacing up here but the animation is actually sitting too close to the technology section.

So let's go ahead and we'll add onto this row actually not on the row but on the grid item wrapping

the lady component.

So if we were to make this item a container and then tried to set this container with a justify of a

flex.

And so that hopefully it would push this animation over to the right end of its container and keep it

over in line with the text up above.

Well we can give that a shot and save this and we'll see the page refresh but nothing has happened it

hasn't moved at all.

So to figure out what's going on let's go to our inspector will inspect the page and we can come down

and here's our div.

So let's open this up.

Here is the first div for our paragraph that looks fine.

The borders are only around the content that we need it to be.

But now if we go through the other div we see that this div is taking of way more space than we actually

need it to be.

So if we cook on this let's open it up and inside we can see that this div right here has a margin.

You can see these two giant orange boxes the orange box.

That means margin.

So if I scroll down in here you see here highlight this margin and it says we have three hundred ninety

five point five points margin all the way around the animation.

So we definitely don't want that.

So what's come over and on the lobby components with our Max width of 40 let's also set a margin of

zero.

OK.

And I'm going to remove the justify a flex and first second I'll just cut that but make sure you have

the style margin zero and we can save this.

The page will refresh.

You can see that a now jumped over and is now much closer to the text.

So now if we go ahead and we give it the justify of flex and we can hit save.

And now the animation is being pulled over to the end of its container and we now have a nice alignment

that we had been going for.