We've just about wrapped up on the header I think that the last big things we have to take care of is
making sure that the logo over here is actually clickable to send the user back to the route of our
application.
In addition we probably also want to make sure that this landing component right here has a little bit
better marketing text of it than it has at present.
So I think that we'll first start off with creating a separate landing component and wiring it up to
our application and then we will also come back and fix up the logo and make sure that it is a link
as well.
So let's get to it.
At present we can open up our client SIRC components app.
Just file and if you recall we are still using a dummy component for the landing screen right now.
So let's create a separate file to house all the markup that will make up our landing page or essentially
the initial marketing page that a user will see in my component's directory.
I'm going to make a new file called Landing Jesus and then inside there we'll put together some boilerplate
for a functional component.
So we'll say in port react from react we'll make a landing component function inside of there we'll
return just a little bit of GSX just to get started.
So I'll place a div inside of it will be in each one and will give it the text email me and then maybe
right underneath it will place some just raw text and say something like collect
feedback from your users something nice and simple.
OK.
I do want to make sure that the H-1 and the text here appears to be centered on the screen to do so
we're going out on a little bit of styling on the GSX side of our application.
So to the top level Dave right here I'll add on a style property that contains an object.
So that's why we have two sets of curly braces here.
One is to indicate that we're about to pass in some javascript and the second is the actual object that
we're passing in and then we'll give it a text a line property of center and that's going to cause everything
inside this div to be centered on the screen.
And the very last step is to make sure that we export this component at the bottom.
So we'll say export default landing and then the very last thing we do is make sure that we import this
into our app component and use it inside of our router configuration.
So we go back to the GSA file.
I will find the dummy landing component.
Now replace it with imports landing from landing like so.
Now remember we already set up our route assuming that the component was named landing.
So we don't have to change anything down here.
OK let's test this out in the browser.
When I flip back over I must have made a typo in here.
Yes.
You'll see that the error message says that the import statements have to be at the very top of the
file.
So we place the import statement after some declarations.
Let's just move up the landing statement like so and save it and give it a shot again.
OK.
So this looks way better than before.
Definitely gives us a little bit more of a marketing presence.
Now again completely optional totally up to you if you want to really flesh out the marketing page here.
You can very easily go back to that landing component and out on as much stuff in there as you wish.
So images videos text fancy animations you know anything you could possibly want would be appropriate
to dump into the landing component.
Again for us we are not really concerned quite so much about styling in this application or in this
course.
This is way more about figuring out the really complex topics on the javascript side of things.
So I'm going to say that this is probably enough to have for the marketing side of our application.
OK.
So we've got the land component put together.
Now the other thing that I had said that we needed to work on was to make sure that the link up here
or the logo up here was clickable.
So whenever a user clicks on this thing they should be able to go back to the root route of our application
and that starts to get important when the user starts to navigate to some deeply nested page in our
application.
We always want to make sure that they have the ability to get back to kind of like the core experience
or the core page and side of our app.
So let's take care of that step inside the next section.