All language subtitles for 3. Services Page - Setup

And here we are at the code editor and on the home page of our project which I have running with the

development server if we scroll down you'll see the services section that we had just created on our

landing page.

And this is very similar to the structure for the services page that we're about to create the layout

that we're about to create is basically the mirror of this.

So instead of having the top section on the left we'll have it on the right in the middle section will

be on the left instead of right and the bottom section will be on the right instead of the left as well

start though by coming up to the components folder and let's add a new file here called serve.

This is a dot J S create that.

And here let's importers some of our basics like react from react.

We import the link from the act or router or Dom and then import import or make styles from material.

You I slash core slash styles and then we'll also go ahead and import the grid from material UI core

grid and we'll import the typography components

and we'll import the button component material UI to real UI slash core slash button then we'll come

down and we will create our constant of use styles set to make styles function calling our theme arrow

function.

And be sure to get the parentheses brackets open it up and then come down to export default function

services open this up and now we'll create the constant of classes with our use styles hook.

Now let's return a grid container direction of column.

Remember we said that that is what we needed for our entire wrapping component for the page.

And now that we have that we need to go and let's copy the grid items that we have created on the landing

page for these services block.

So on the landing page dot J.S. will come down and let's scroll down past the hero block to here.

This grid item wrapping the container direction row and we'll go ahead and we'll start here and we will

go down.

We'll copy that entire software blog.

Keep scrolling past Iaw and Android blog to the Web sites blog all the way down to just above the revolution

block the opening grid tag there just above that.

This last closing grid tag and we will copy all of that.

So get that copied foot back over to the services dot J us and we can just go ahead and paste that right

in between our great right and right off the bat.

You see.

Yes Linton is throwing some problems because we don't have any of these variables that were set up so

let's start by scrolling back up to the top.

And let's import a couple more things like our import use media query from material to a real UI slash

core slash use media query and then inside of the import.

Next to make styles will also import use theme.

So we'll come down.

And underneath are constant of classes.

Let's add the constant of theme equal to use theme.

And then we will set our constant matches small equal to our use media query called with theme break

points down for small still have some more things to set up.

You see we don't have props defined and we actually haven't even rendered this component yet.

So we can go ahead and in our app dot J.S. file.

Let's go ahead and we will import the services component from DOS slash services.

And I realized earlier that up here I was always going up a directory and then into components when

we're in the components directory already with our app J.S. file.

So if you saw that and wondered why I did that earlier I don't know either.

So we'll just get rid of that and you can just use the in directory reference with just the dot slash

and then UI or does slash the component.

So just dot slash services is all we need to import that and we can come down now to where we're rendering

our services dummy components and let's change that now to render our services component but we want

to render it with the props that we had been using for the landing page in the header and footer.

So let's go ahead and use this render props syntax that we used for the landing page.

So go ahead and copy that render of property and let's get rid of this component property here on the

services path.

So all the way down to this last little bracket.

And let's paste in that render property but change landing page to now services.

So can go ahead and save that.

And now our services page will be being rendered we still have a couple of things to do to get it out

on the screen though.

So let's come back to services digest and now inside of our function call we can take it the props which

we had needed and we can scroll down to see and now it looks like we need our button arrow.

So we'll come up let's import the button arrow from slash UI slash button Arrow slash up there we don't

need that.

So it's come down we'll see what else we need.

It's like we need the custom software icon the mobile apps icon and the website's icon.

I think those are the last things.

So underneath our button arrow it's import the custom software icon from dot dot slash assets slash

custom software icon will import mobile apps icon from Doctor slash assets slash mobile mobile icon

and import the website's icon from up directory assets Web site icon.

Let's go ahead and we'll save the services page now.

Our development server refresh and what's come up to our services tab now.

We go ahead and select the services route.

And here we are taken to these services page here we have the services block that we had just copied

over.

But it looks like we're still missing a few of these styles.

So the learn more buttons don't look correct and our containers should be a little bit differently styled.

So we also need to go over to the landing page file again and scroll down a here in our styles to where

we have the services.

There are service container the icon and the subtitle and a special text styles.

OK.

So we're going to copy all of those styles go back to our services page and let's paste them into our

styles object here and then let's go back one more time and come up to the learn button style.

So we'll copy that.

Go back over and paste that in as well.

Go ahead and save the services page now to see refresh.

And now we've got all these styles that we had been looking for this is already really close to the

entire services page being finished basically except remember how we needed the layout to be mirrored

essentially.

So we need this left side over on the right this right side over on the left and this left side over

on the right.

Not only that I also want the custom software development section to now be the second section so that

it will be the one in the middle on the left.

So to do that we'll scroll down here and the services dot J.S. file and we'll find the grid item containing

our IAW an android block and let's go ahead and we'll take that entire grid item.

Make sure you have all the way down to the right grid item tag and we will cut that and then come up

above the item for the custom software block.

So right underneath our grid container direction column and let's paste that item in so we'll save that

the page will refresh and now you can see that those items have switched places.

Since we switched places with ones that were already actually on the sides that we needed.

So the right side is now here on the right.

This middle section is on the left.

So now we just need to get the website section here over on the right which we can do very easily if

we come down and on the web.

BLOCK here where we're setting the justify property because remember we're wanting to move this over

to the right in the horizontal direction and since we're in the direction of row that's our main access

which we can specify with the justify property.

And here instead of setting undefined if we're above the small breakpoint which the default is this

left alignment let's go ahead and it will set a flex and property to this which will align our item

to the right end of the main axis are horizontal right direction.

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

And now our item has jumped over there was a couple things to keep in mind here.

The first being that we did have the website development section over on this left side.

And so we had been creating a left border over here like with the custom software development section

which you can see here with our margin left of 5 m.

And now that we're on the right side we don't want this invisible margin over here.

So what's actually cut this property will cut that whole property off of here and we'll scroll down

to the item wrapping our Web site icon image and we'll give it a style equal to the property that we

had just copied and let's change the margin left to a margin of right.

And so that will give us these same five m margin above over here on the right side.

So we'll save that and now you see that we do have that spacing which is consistent with the spacing

up above.