All right.
And now let's complete our first page, which is going to be the landing page.
So this is the result we're shooting for somewhere here at the top, we'll display the logo.
We'll also have some kind of heading and some text about the application and then two links.
One is going to be to register page and the second one is going to be to the login page, where also
we have a demo user option.
So if somebody just wants to take a look at the application, they can go with the explore the app option
instead.
Now before we start setting up the logic, I want to showcase how we're going to be setting up the CSS
in this application and effectively CSS is going to be optional.
So what do I mean by that?
Well, if we take a look at the assets more specifically wrappers, we'll notice a bunch of files.
And then if I open up the landing page, notice something interesting.
So I have the wrapper, something we just created in the landing page.
And as a side note, that's not what I want to do.
So let me close this one and notice that.
I have the same setup.
I have the wrapper.
It's a section.
So we will return a section.
And then I have all the styles we're going to use in this particular page.
And I'm exporting this wrapper.
So here's what we can do.
We can go back to the landing one, We can import the wrapper from our assets and just return from the
landing component.
And as a result, we'll right away get the styles.
And essentially, here's the approach we're going to take.
If you're not interested working on the CSS, you'll be able to skip the video.
You'll simply import the wrapper with all of the styles and we'll set up together the logic.
Now, if you are interested in working on the CSS, every time we're done with the page, there's going
to be an optional video where we'll navigate to the specific styled component.
In this case, it's going to be a landing page.
We will remove all the styles and we'll set it together from the scratch.
Again, it's going to be an optional video.
If you're not interested, just skip to the next one.
You don't have to follow along with the CSS.
All the styles are already provided.
Hopefully that is clear.
So let's navigate back to the landing.
Let's set up the imports first, including the styled wrapper.
And like I said, after that we'll worry about the actual CSS.
So for now, let me just remove the local wrapper and let me import the wrapper from my assets.
So let's go over here.
Let's say import all of them pretty much have.
This name.
Rapper.
Now, please keep in mind that.
All of them are exported as default.
So technically you can use whichever name you want in the actual component, but again, it's my preference
to use wrapper.
So I have all of these styles.
Let me save.
Notice right away I have a different look.
And you know what?
I want to go to the.
Home layout and I want to remove this nav bar.
Again, this is just for demonstration purposes.
And also I'm not going to set this one up as a div, it's just going to be a react fragment.
And then back in the landing.
One, we want to set up the wrapper.
Okay, we have that.
And then let's go first with the nav and inside of the nav we'll have a logo.
Now in order to grab logo as well as the main image.
We'll need to take a look at the assets and more specifically, images.
I notice we have logo.svg.
That's our logo.
And we also have here this main SVG, which effectively is going to be the image in the landing page.
So I guess let's start by importing those two.
First one is going to be main.
Again, this is located in the assets then images and we're looking for forward slash main SVG and then
the same deal with the logo.
In this case, it's assets, images and then a logo SVG.
And in a few videos I'll showcase where I got the logo as well as the main image.
And then we also want to grab the link component from React router Dom.
But this one I'll try to auto import.
Okay, so we have the wrapper.
Now let's start by setting up our image.
As far as the source.
This is going to be the logo one.
Now for Alternative, I'm just going to type here Java file and let's add a class name of logo.
Again, we'll work on the CSS.
In the following video.
But again, it's going to be optional.
And check it out once we save notice, right?
We have my logo and all the styles are already applied.
Then right outside of the NAV, we want to go here with container and page Div.
And inside of this div we're going to go with div with a class of info.
Then we'll set up a heading one.
We'll go job.
We'll place a span here just because we will add different color to the word here, the tracking one,
and then we'll go with app after that.
We want to go with the paragraph and this is the case where I will copy this from the complete project
because I just don't see the point of.
Typing it together.
And as a side note, I'm getting these texts from the hipster ipsum if you're interested.
So navigate to hip Simcoe and you can get.
These type of hipster texts.
Now, alternatively, you can also set up here a paragraph and you can just use the Lorem text.
That's also an option.
It's just my preference to use those hipster words.
And no, it's not because I'm a hipster.
I just find them funny.
Then after the paragraph we're going to go with Link and like I said, I'll try to get the auto import
working.
So we're going to go with Link and the first one is going to be to the register page.
So two options.
First one is going to be forward slash register and then we want to add some class names.
Now, this is a global class, the button one that is coming from the index, CSS.
And we want to go here with register link.
So these are the styles we'll apply in the style component.
Then let's just type here register.
So that's going to be the text.
So that's our button.
That's our text.
Let me close this one and we want to copy and paste and now we want to set up the login one.
So instead of register we'll type login and it's only going to have the class button.
And then when it comes to text, we'll say login forward slash demo user.
And then right outside of this div, we're going to place an image.
So we're going to go here with image source.
And let's set up the main one.
As far as the alternative, let's just write job hunt and let's add a few classes over here.
First one IMG and then main IMG.
Let's save it.
On a small screen.
We won't see the image.
That's how I set up the project.
And then once we get to the big screen, notice, we'll have the info and the image side by side.
And with this in place.
We're done with the first page, with the landing page.
And if you're interested, you can work on the CSS, which we're going to do in the next video.
If not, you can skip and move on to the next topic.