This section is all about publishing, really, but we're going to add a few things into our application.
Things like a home page.
We don't really have a home page.
If we do, go and take a look at what we currently have for our home page.
Well, there's room for improvement.
So we'll do a bit of work on this in this particular lesson.
So let's go and open up our home page.
And inside here we'll just have some content fairly basic content for this.
We're not going to go wild with an amazing home page here.
Just keep things as simple as possible.
So we'll use a box first of all inside here.
And we'll give our box some properties.
We'll give it a max width and specify Excel.
We'll give mm equal to auto.
To centralize the content on the page we'll have padding left and right of four.
And we'll give it a position of relative.
And we're using a relative positioning on this box so that we can absolutely position an image inside
this component further down.
That is a requirement if we want to absolutely position something against this box, then it has to
have this position of relative.
Inside this box, we'll have another box and add its closing tag.
And for this one we'll use Display of Flex and we'll give it a flex direction of column.
And we'll align items and say center.
And we'll have justify content of center.
And I'm not going to make it without going off the screen in this one.
So I'll just start moving things down inside here and below the justify content.
I'll give this one a position of relative as well.
And then we'll add an image tag inside here.
We'll give this a source of one of the images that we added earlier.
Inside the public folder we've got an images folder.
And there's a few hero images inside here.
We'll just use one of them to display on our page.
So we'll use the forward slash images.
Forward slash hero one dot jpg.
And we'll just give it an alt of ski resort image.
And we're going to need some style inside here as this is not a material UI component of course.
So we're going to use the style property.
And inside here we can give it some CSS classes.
So we'll set this one's position to absolute.
We'll use inset and set that to zero.
And inset is just a shorthand way of saying top zero, bottom zero, left zero right zero.
And we'll give it a width of 100%, we'll give it a height of 100%.
And we'll use the object fit and specify cover.
So it takes up all of its available space inside its container.
We'll give it a border radius And set this to 16 pixels, and we'll give it a z index of zero.
And we're going to display some text over the image.
And we want to make sure the image sits underneath.
And then below the image tag we'll add another box.
And we'll give this some styling properties as well.
We'll use Display Flex again.
We'll give it flex direction and set this equal to column.
We'll use padding all around of eighths.
And we'll align items and set this to center.
Once again we'll use the position of relative.
And we'll have a border radius and set this to four.
And inside this box we'll use typography.
And we'll give this some properties.
We'll give it a variant of H1.
So it's huge.
We'll give it a color.
And I'm just going to use inherit it for less.
In fact, no, we'll give it a color of white because this is going to be overlaid on top of the image.
We'll give it a font weight of bold and the text align of center, and we'll use F6, and we'll give
it a margin above and below of three.
And we'll just say welcome to restore exclamation mark and below the typography let's use a button.
And we'll give this some properties as well.
And we'll give it a variant of contained.
We'll make the size equal to large.
We'll make it a component.
And we'll give it a link which we'll get from React Router Dom.
And we'll give it the two property and say in quotes forward slash catalog.
And this button will give some styling as well.
And we'll give it a margin top of eight.
We'll give it a background image, and we'll use a linear gradient here just to make our button stand
out a bit.
So we'll use linear.
Gradient.
And in parentheses here we can say two right comma.
And then hash 2563 EB.
And then for the other part of the gradient will have 06B6D4.
And we'll use font weights of bold will give the color and set that to white.
The border radius will set to 16 pixels.
And I'm missing a comma there.
And we'll use px of eight for padding left and right rates and pi of two.
And we'll also give this a border.
And we'll set it to two pixels and solid and transparent.
And we'll just say go to shop as its label so that we'll do a relatively simple home page.
And let's see how it looks.
And there we go.
We've got a big heading.
And we've got our button that allows us to go to our catalog.
And that's what we're looking for a simple home page.
Please be as adventurous as you like.
Since you're not constrained with the time constraints of a lesson.
So go to town on your home page if you wish.
But that's good enough for my purposes for this demo.
And if we take a look and see how it looks in light mode, it's exactly the same.
Of course, because we gave this some very specific styling.
So what we're going to take a look at next.
Now we have this in place.
We're going to take a look at creating a production build of our react application.