All language subtitles for 5. Creating The Hero Block

With our animation in place we're ready to get started on building the.

Hero block where the animation is if you don't remember exactly what the hero block looked like.

Go ahead and check the design file and open that up as we're building it as a reference and try to imagine

how you would structure the grid containers and items to create the layout that I designed.

We'll go ahead though and jump over to the code editor with our project directory open and we'll get

started and here we are.

And let's go up and we'll start by underneath the make styles import.

Let's go ahead and import the grid component from material UI core grid then we'll come down to our

return statement and let's make this a multi line statement by wrapping that with parentheses and we

can go ahead and open this up.

And here I'm going to start with a grid component.

We'll open that up.

And this is going to be the grid item which holds all of the content for our home page the home page

is built kind of in blocks.

And each of these blogs sits on top of one another with the hero block at the top.

And then our services block the revolution block and you'll see that style as you go through the design

file and sense all of these blocks are sitting on top of one another from top to bottom.

We're actually going to want this outer grid component to be a container with a direction of a column.

And so that's going to align all of the blocks for the home page from top to bottom.

So that means we need to start with a grid item.

And this is going to contain all of the hero block content inside that grid item.

We're going to need a another grid container that will contain the grid items for the hero block.

And the first item in that is going to be all of the text with the slogan bringing West Coast technology

to the Midwest.

That is going to be our first item that we're going to want.

On the left and on the right we're going to want our animation.

And so with those two great items I just said that we're going to want it from a left to right.

And so this is going to be a grid container with a direction direction of row.

And that's the default.

But I'm going to set it there just to be extra clear about what's going on.

So in this grid container I said that the first grid item that we're going to have is going to be for

all of the text in our hero BLOCK We're going to start by getting all of this on the screen and then

in the next video we're going to go ahead and style at all.

So we'll start with just a div right now containing the text bringing bringing in West Coast technology.

And then here I'm going to insert a line break and then right after the line break we're going to say

to the mid mid west.

So there's our slogan and let's go ahead now and create the other grid item next to it which we said

was going to be holding our animation.

So we'll copy the audio component up into there but we haven't actually finished the text yet.

Because if you look at the design file we also wanted to have a learn more button and a free estimate

button next to the text as well.

So we need to come up and underneath our grid.

Important Statement.

Let's import the.

Button component from material dash UI slash core slash button we're going to want to place these buttons

underneath our slogan but I'm actually going to put them in their own container so that they're easier

to align.

So let's create a another grid container inside underneath the div and each of our buttons is going

to be inside of a grid item.

So we'll start with a grid item here for our button and we're going to set a variance on this button

to contained which we'll give it that field in look and so we'll open that up and give it the text free

estimate and then we'll come down and make sure you're getting all this in the right place.

So underneath that grid item will add another grid item and this will be a button of variance outlined

and then we'll close that up and inside here put the text learn more now.

I also want a little arrow inside the learn more button and to do this I've actually set up this button

arrow dot J.S. component in your UI folder and you actually won't need to make this I'm going to attach

this component to this video so you can download it and then you'll just need to move that into your

UI folder I found when I was first building this site.

I want to use this arrow within different buttons across all the different pages on my Web site.

And so instead of copying this little button over and over again I decided to make it a little basic

react component so that I could actually just import and customize it.

You can see it takes props and it uses these props to set a class name from our class prop the width

for the arrow the height of the arrow as well as the fill of the arrow so we can change its color its

size and we can pass in whatever class we want if we need to customize these styles further.

Let's go ahead and close out of this now.

And underneath our button import let's go ahead and we'll import the.

Button arrow from up one directory components and then UI and button arrow.

Now we can go ahead and inside of here.

Let's go ahead and we'll open this up.

Put our learn more.

And then underneath that learn more text we will render our button arrow and let's set a width equal

to 15 pixels and a height height also equal to 15 pixels and a feel equal to red.

And I'm just doing that so we can actually see it on the screen.

And let's go ahead and close up that button arrow as well.

So if we go ahead and save this now we'll see our page refresh and we can now see a structure much closer

to what the hero block in the design file looks like.

Obviously there are still a lot of changes we need to make.

But you can see that we have the skeleton in place.

Let's go ahead and finish this up and style it and make it look exactly like that design file as well

as responsive for different screen sizes in the next video.