All language subtitles for 17. Creating The Call To Action

The last piece to finishing our home page is actually going to be a piece we'll use in multiple locations

on the rest of the site as well.

This is our call to action and this will be at the bottom of most pages on the site and we'll give the

user a reminder that they can always go and get a free estimate from the calculator on the site.

So if you don't remember what that looks like.

Here's a screenshot and similar to the last two blogs will be using a background image put on a div

with our grid is sitting on top of that image and we'll use that to arrange the text and the Free Estimate

button.

The only thing that I think I'll change with the design of this however is there won't be quite as much

space on the left side of the text from the edge.

We're gonna have that much closer and consistent with the bordering for the rest of the elements on

the site so that look a lot better.

And once we shrink this down and it's on a mobile site we're going to lay this out vertically and sensor

it up the way we have for all the other elements as well.

The only difference here is that we're also going to be changing the background image for these smaller

devices.

And I took a more vertical cut out of this picture that will look a lot better on the mobile site rather

than trying to cram this in somehow.

So I'll see you in the code editor to begin.

Since the call to action is going to be used in multiple places on the site we're going to need to build

it as its own component.

So in the UI folder let's create a new file called Call to Action dot J.S. and we'll start with some

of our usual imports I.

Add a couple more to that usual list but let's go ahead and import react from react and then we'll import

the GRID GRID from material dash UI sized core slash grid we'll import the typography components from

material UI core typography and we'll import our Make styles hook from material UI core styles and then

we'll come down we'll create our constant of use styles which will take our Make styles hook and give

us access to the theme arrow function.

But remember this needs to be wrapped with parentheses.

So we're returning an object and we'll just leave this blank for now but then we can come down we'll

export defaults.

Our call to action our function.

Function call to action get our parentheses can open this up and create are constant of classes using

our styles.

Now let's return a grid container open that and this is going to be our main grid container for the

call to action and we'll leave the default direction of row set because we want the items laid out horizontally

and then each of our items inside the container will be our text and the button.

So the first item will also have to be a container since it will have the text some subtext and then

the learn more button and then the second item will just be the Free Estimate button.

So let's open this up and we'll create a grid item here and this will be for the text on the left side.

And so in here we'll also need a grid container.

But this time with a direction of column and so this will make sure that we're laying out our title

subtitle and the learn more button from top to bottom.

And so now we can create a grid item.

Item an inside of here created to get rid of that and inside of here we can have our typography component

but a variant of H to close that saying simple software revolutionary evolution area results and actually

in between here I want a line break.

So that will stack those two sentences on top of each other but we'll use the H to styling that we've

already set up previously theming system really makes it convenient when you use the same styles for

different headings and subtitles and all the other styles that we've used across our site without having

to replicate any code.

So I always just really appreciate that.

Now under this typography component.

Let's create another typography component using our variants subtitled two styles or open that.

And here we'll say take advantage of the 21st century.

So let's go ahead and save this.

And now we need to go in our landing page and we'll come up to the top.

And here I'm going to do it in between these assets and we'll import our call to action from this directory.

You I slash call to action and then we can come all the way down to the bottom of the screen.

And underneath are grid item for the information block all the way underneath that will open this up

and add our last to grid item for the home page and we can come up and we'll actually copy this comment.

Copy that paste our comment in there.

Change this to the call to action and inside of here we'll simply render our call to action component.

So what saved this.

We'll see our page refresh and it now we've got the beginnings of our call to action at the bottom of

the screen you can see our simple software revolutionary results as well as the text.

The take advantage of the 21st century underneath in white.

So we're on the right track.

Let's keep going and get the learn more button built.

So we'll flip back to the call to action.

J.S. and we'll come up here and let's import the button from material UI core button and then import

the button arrow from dot slash button arrow and then next to our Make styles import let's also grab

the EU's theme hook.

So now we can come under our classes and we'll create the constant theme equals a use theme to give

us access to our theme inside the component.

And now we can come back to the landing page and let's actually grab this the grid item and see this

whole grid item and we'll go back to the call to action.

J.S. and underneath are typography component we'll go ahead and paste that right in then you might notice

that we have a grid item within a grid item.

So let's go ahead and we can just add the container property onto there as well.

And now we need to go ahead and grab this learn Button class from the landing page as well so that our

button has the correct styles.

So let's flip back to the landing page will come back up to the styles object and here's our learned

button style.

Let's go ahead and copy that flip back over and inside of our styles object for the call to action.

Go ahead and paste that in.

Let's go ahead and save this now and we'll see the page refresh and our button is actually still receiving

the white color and border color that we had used on the about us and contact us buttons which we had

copied this from.

So let's go ahead and delete that style line and go ahead and get rid of that and save this and now

we can see that we have the correct learn button below but the arrow is also white.

So here where Phil is specifying White let's change that to our theme dot palette dot com in dot blue

and we can save that.

We'll see the page refresh.

And now the word button looks better but there's still a little too much spacing right between that

arrow it looks like let's go ahead and change that margin right to just a margin of five.

We'll save that.

And that looks much more appropriate.