WEBVTT 00:00.440 --> 00:05.720 This section is all about publishing, really, but we're going to add a few things into our application. 00:05.750 --> 00:06.950 Things like a home page. 00:06.950 --> 00:08.960 We don't really have a home page. 00:08.960 --> 00:11.840 If we do, go and take a look at what we currently have for our home page. 00:11.840 --> 00:13.550 Well, there's room for improvement. 00:13.550 --> 00:17.270 So we'll do a bit of work on this in this particular lesson. 00:17.270 --> 00:20.330 So let's go and open up our home page. 00:20.330 --> 00:24.890 And inside here we'll just have some content fairly basic content for this. 00:24.890 --> 00:28.160 We're not going to go wild with an amazing home page here. 00:28.160 --> 00:30.410 Just keep things as simple as possible. 00:30.410 --> 00:33.440 So we'll use a box first of all inside here. 00:33.440 --> 00:35.330 And we'll give our box some properties. 00:35.330 --> 00:39.350 We'll give it a max width and specify Excel. 00:39.950 --> 00:43.400 We'll give mm equal to auto. 00:43.400 --> 00:49.190 To centralize the content on the page we'll have padding left and right of four. 00:49.220 --> 00:53.360 And we'll give it a position of relative. 00:53.360 --> 00:59.840 And we're using a relative positioning on this box so that we can absolutely position an image inside 00:59.840 --> 01:01.100 this component further down. 01:01.100 --> 01:06.360 That is a requirement if we want to absolutely position something against this box, then it has to 01:06.360 --> 01:09.360 have this position of relative. 01:09.660 --> 01:16.320 Inside this box, we'll have another box and add its closing tag. 01:16.590 --> 01:24.390 And for this one we'll use Display of Flex and we'll give it a flex direction of column. 01:25.080 --> 01:28.560 And we'll align items and say center. 01:29.640 --> 01:33.060 And we'll have justify content of center. 01:33.630 --> 01:36.510 And I'm not going to make it without going off the screen in this one. 01:36.510 --> 01:42.840 So I'll just start moving things down inside here and below the justify content. 01:42.840 --> 01:47.640 I'll give this one a position of relative as well. 01:48.360 --> 01:51.720 And then we'll add an image tag inside here. 01:51.720 --> 01:55.440 We'll give this a source of one of the images that we added earlier. 01:55.440 --> 01:58.680 Inside the public folder we've got an images folder. 01:58.680 --> 02:01.530 And there's a few hero images inside here. 02:01.530 --> 02:05.490 We'll just use one of them to display on our page. 02:05.490 --> 02:08.160 So we'll use the forward slash images. 02:08.190 --> 02:12.750 Forward slash hero one dot jpg. 02:13.590 --> 02:18.480 And we'll just give it an alt of ski resort image. 02:18.480 --> 02:26.460 And we're going to need some style inside here as this is not a material UI component of course. 02:26.460 --> 02:29.100 So we're going to use the style property. 02:29.100 --> 02:32.730 And inside here we can give it some CSS classes. 02:32.730 --> 02:35.610 So we'll set this one's position to absolute. 02:35.640 --> 02:39.660 We'll use inset and set that to zero. 02:39.660 --> 02:45.510 And inset is just a shorthand way of saying top zero, bottom zero, left zero right zero. 02:45.510 --> 02:56.400 And we'll give it a width of 100%, we'll give it a height of 100%. 02:57.810 --> 03:03.180 And we'll use the object fit and specify cover. 03:03.180 --> 03:06.840 So it takes up all of its available space inside its container. 03:06.870 --> 03:19.150 We'll give it a border radius And set this to 16 pixels, and we'll give it a z index of zero. 03:19.150 --> 03:22.570 And we're going to display some text over the image. 03:22.600 --> 03:25.900 And we want to make sure the image sits underneath. 03:25.900 --> 03:31.570 And then below the image tag we'll add another box. 03:32.620 --> 03:35.350 And we'll give this some styling properties as well. 03:35.350 --> 03:37.630 We'll use Display Flex again. 03:37.660 --> 03:42.310 We'll give it flex direction and set this equal to column. 03:43.060 --> 03:45.970 We'll use padding all around of eighths. 03:46.330 --> 03:51.580 And we'll align items and set this to center. 03:51.730 --> 03:55.000 Once again we'll use the position of relative. 03:56.230 --> 04:00.550 And we'll have a border radius and set this to four. 04:01.390 --> 04:04.870 And inside this box we'll use typography. 04:06.460 --> 04:08.200 And we'll give this some properties. 04:08.200 --> 04:10.270 We'll give it a variant of H1. 04:10.270 --> 04:11.590 So it's huge. 04:11.620 --> 04:13.210 We'll give it a color. 04:13.210 --> 04:16.450 And I'm just going to use inherit it for less. 04:17.200 --> 04:22.000 In fact, no, we'll give it a color of white because this is going to be overlaid on top of the image. 04:22.030 --> 04:35.020 We'll give it a font weight of bold and the text align of center, and we'll use F6, and we'll give 04:35.020 --> 04:38.020 it a margin above and below of three. 04:38.980 --> 04:48.940 And we'll just say welcome to restore exclamation mark and below the typography let's use a button. 04:52.030 --> 04:54.700 And we'll give this some properties as well. 04:54.700 --> 04:57.700 And we'll give it a variant of contained. 04:59.560 --> 05:02.980 We'll make the size equal to large. 05:03.790 --> 05:05.170 We'll make it a component. 05:05.170 --> 05:10.630 And we'll give it a link which we'll get from React Router Dom. 05:10.990 --> 05:16.720 And we'll give it the two property and say in quotes forward slash catalog. 05:17.230 --> 05:20.300 And this button will give some styling as well. 05:20.570 --> 05:24.020 And we'll give it a margin top of eight. 05:25.160 --> 05:34.250 We'll give it a background image, and we'll use a linear gradient here just to make our button stand 05:34.250 --> 05:34.790 out a bit. 05:34.790 --> 05:36.110 So we'll use linear. 05:38.480 --> 05:40.460 Gradient. 05:41.060 --> 05:45.620 And in parentheses here we can say two right comma. 05:45.710 --> 05:50.990 And then hash 2563 EB. 05:51.560 --> 05:59.270 And then for the other part of the gradient will have 06B6D4. 05:59.270 --> 06:08.000 And we'll use font weights of bold will give the color and set that to white. 06:08.540 --> 06:15.500 The border radius will set to 16 pixels. 06:16.370 --> 06:18.050 And I'm missing a comma there. 06:18.200 --> 06:24.740 And we'll use px of eight for padding left and right rates and pi of two. 06:24.770 --> 06:27.470 And we'll also give this a border. 06:29.690 --> 06:37.310 And we'll set it to two pixels and solid and transparent. 06:38.060 --> 06:44.270 And we'll just say go to shop as its label so that we'll do a relatively simple home page. 06:44.300 --> 06:47.060 And let's see how it looks. 06:47.090 --> 06:48.020 And there we go. 06:48.020 --> 06:49.370 We've got a big heading. 06:49.370 --> 06:53.750 And we've got our button that allows us to go to our catalog. 06:54.320 --> 06:57.350 And that's what we're looking for a simple home page. 06:57.350 --> 07:00.260 Please be as adventurous as you like. 07:00.290 --> 07:03.920 Since you're not constrained with the time constraints of a lesson. 07:03.920 --> 07:06.500 So go to town on your home page if you wish. 07:06.500 --> 07:10.370 But that's good enough for my purposes for this demo. 07:10.370 --> 07:14.720 And if we take a look and see how it looks in light mode, it's exactly the same. 07:14.750 --> 07:18.680 Of course, because we gave this some very specific styling. 07:18.710 --> 07:20.690 So what we're going to take a look at next. 07:20.720 --> 07:22.010 Now we have this in place. 07:22.010 --> 07:27.350 We're going to take a look at creating a production build of our react application.