All language subtitles for 1. Section 5 Intro material

Our application now has a completed header and footer.

These are the two most important components the are rendered on every page of the site and so now that

we have those completed we can go and start moving on to our actual content the natural place to start

than would be the landing page.

This is typically the first page that your users will see when they land on your Web site.

And so the strategy that I've used to put it together is for the home page to basically act as a road

map of the rest of the Web site to help present the information and guide the user to more specific

areas that they're looking for.

So you'll notice when we're building it that each section on the home page actually corresponds to all

of the other pages on the Web site.

We'll start at the top of the home page with our animation going to start by walking you through how

I actually export my animation from after effects and how I then get it into a form that's usable within

a react application if you don't have after effects.

Don't worry because I've included all of the animations and their final files inside of the project

1 files that you already have downloaded after I show you how to properly export the animation will

then get into importing that within our ReACT application and using a library to render that on the

screen this first animation that we're going to work with is this illustration right here which will

have the CPSU IN BETWEEN THE HANDS being passed back and forth.

We'll get this set up and then make sure that a resize is correctly for different devices while maintaining

the alignment and consistency with the text that will go along next to it.

This very top part of the home page.

I call the hero block and that is what they're commonly referred to as this is where you're really showing

off and trying to grab the attention of your users.

So starting off with an animation is a good way to do that.

And underneath our hero block will then move onto these services block and you can see here that this

contains a set of icons and small descriptions for each of these services that I offer on the site we're

familiar with these pages since these are actually the menu items appearing on our services tab.

And this will be our first more complex layout to work with in the grid component.

So take a second to think about how you would structure the grid containers and items to create a layout

like this and then you'll see how I chose to do that and how we then make sure that it's perfectly responsive

for all screen sizes under the services block.

We then have the revolution block and here all introduce the card component which creates that floating

little block you see in the middle as well as a simple trick for adding our background images the last

main block of the home page is the info block.

And this again just has a image in the background.

And then we'll be using the grid to create the little layout with are about us on one side and the contact

us on the other.

So this shouldn't be too difficult at all to set up and it's actually a pretty basic grid implementation.

The very last part of the home page is actually a component that we're going to be using across multiple

pages on the site.

And that is our call to action.

This is on the bottom of most pages on the site and acts as a constant reminder to the user that they

can go and get a free estimate at any time and encourages them to do so.

I will make a small executive decision on the design though as we're building.

I'm gonna have that text.

The simple software revolutionary results that a whole little block is going to be more aligned to the

left and it's going to look a lot cleaner and consistent with the rest of the elements on the page and

I might tweak a couple of things from the design file that you'll see as we're actually building it

that I've found to just look a little bit better but I'll make sure it's a point all that out as we

go once we finish this section we will have a completely finished and polished landing page for our

application we'll really have the foundation that we need to then go and build all of the rest of the

site and you'll really be combining everything that you've learned so far to implement this and I think

that that will really go ahead and solidify and clear up a lot of the concepts that we've talked about.

So I'm excited for us to get into the meat of the application now now that we're out of the skeleton

and so let's get started working on this in the next video.