1 00:00:00,300 --> 00:00:00,850 All right. 2 00:00:01,330 --> 00:00:09,150 Next hour, I want to focus on the Amber Alert page, as well as the checkout page for both of them 3 00:00:09,150 --> 00:00:11,600 who have the same initials set up. 4 00:00:11,970 --> 00:00:19,830 And what's interesting about these pages, we'll also build on this page hero, where we have the page 5 00:00:20,430 --> 00:00:26,430 above the content of the page, which is going to display some kind of depth with a little bit of styling 6 00:00:26,790 --> 00:00:30,900 and says, well, what is the page that we're currently on? 7 00:00:31,200 --> 00:00:38,310 And also we have a link to navigate back to the homepage and both the about as well as the checkout. 8 00:00:38,310 --> 00:00:43,920 We'll use the same initial setup and we'll also add this page here eventually through the product, 9 00:00:44,070 --> 00:00:50,100 through the card and rest of the pages, apart from the homepage, that one will have different set 10 00:00:50,100 --> 00:00:50,260 up. 11 00:00:50,710 --> 00:00:55,390 So now let's start by navigating to about page notice, reporting the page here. 12 00:00:55,680 --> 00:00:58,080 So eventually we'll set it up and this video. 13 00:00:58,440 --> 00:01:01,380 But we'll start with just displaying the main. 14 00:01:01,710 --> 00:01:06,340 So this is going to be the case where wrapper will be used a little bit later. 15 00:01:06,810 --> 00:01:08,420 So I just say simple return. 16 00:01:08,730 --> 00:01:15,510 So I'm returning the main and I'll start by displaying the page hero, something that we'll work on 17 00:01:15,510 --> 00:01:16,140 in a second. 18 00:01:16,500 --> 00:01:24,150 So Page and then Hero on notice how I'm reporting as named import from the components, because remember 19 00:01:24,480 --> 00:01:32,220 we have the indexed order where we import all the files and then export names exports and only then 20 00:01:32,430 --> 00:01:33,720 we'll have the wrapper. 21 00:01:33,930 --> 00:01:40,620 So now I would want to place my wrapper so my style component and then inside of it there is going to 22 00:01:40,620 --> 00:01:42,260 be two column layout. 23 00:01:42,510 --> 00:01:48,180 Now, of course, as far as the column mounts, everything is already set up here in the CSIS and my 24 00:01:48,180 --> 00:01:48,980 staff component. 25 00:01:49,260 --> 00:01:52,740 But I do want to add three global classes. 26 00:01:53,010 --> 00:01:55,530 So we're going to go here with class name page. 27 00:01:56,310 --> 00:02:01,530 That is just going to make sure that, again, we take up most of the space apart from the page here 28 00:02:01,530 --> 00:02:02,700 on our and lot. 29 00:02:02,700 --> 00:02:05,400 So something similar like we did in the error. 30 00:02:05,940 --> 00:02:07,020 Only in this case. 31 00:02:07,020 --> 00:02:08,600 This is a little bit different. 32 00:02:08,610 --> 00:02:11,190 Again, if you want to take a look and says, please do so. 33 00:02:11,550 --> 00:02:18,300 And then I have one class, the section class that just adds a little bit of padding top and bottom 34 00:02:18,510 --> 00:02:21,540 and section center that adjust. 35 00:02:21,560 --> 00:02:27,330 Make sure that we always have the same with again, if you're interested in those class names, those 36 00:02:27,330 --> 00:02:31,590 are global classes and you can check them out in the index success. 37 00:02:32,010 --> 00:02:35,970 And then I'm going to have to come out and the first one will be image. 38 00:02:36,210 --> 00:02:40,430 And notice how again, I have the image imported from the assets. 39 00:02:40,770 --> 00:02:41,940 Now, I cheated a little bit. 40 00:02:41,940 --> 00:02:48,960 I use the same image that we're going to use in the homepage, the hero picture and the path is following. 41 00:02:48,960 --> 00:02:50,850 Again, we take a look at the assets. 42 00:02:51,120 --> 00:02:58,740 We look more specifically for Hero hyphen BTG and then full extension dot jpeg file. 43 00:02:59,540 --> 00:03:05,180 And then give it some kind of name in this case, it's going to be about image and we're just going 44 00:03:05,180 --> 00:03:10,910 to say about HMG, as far as the alternative will say, nice and dusk. 45 00:03:11,570 --> 00:03:13,220 So that's going to be the first column. 46 00:03:13,490 --> 00:03:15,290 And the second one will be article. 47 00:03:15,650 --> 00:03:17,170 And by the way, you know what? 48 00:03:17,180 --> 00:03:20,890 In here, I think we can navigate to about Page so we can see something. 49 00:03:21,230 --> 00:03:22,700 And of course, I haven't saved it. 50 00:03:22,850 --> 00:03:24,260 So now or need to save it. 51 00:03:24,590 --> 00:03:26,290 My heart reloading is working. 52 00:03:26,300 --> 00:03:27,350 I have page zero. 53 00:03:27,740 --> 00:03:29,290 Don't worry about this gap over here. 54 00:03:29,390 --> 00:03:32,600 Once we set up the page here, it's going to disappear. 55 00:03:32,900 --> 00:03:36,980 And then right next to the image, I'm going to go with my second column again. 56 00:03:36,980 --> 00:03:40,970 The Commonwealth will kick in on a bigger screen for the time being. 57 00:03:41,330 --> 00:03:46,810 There's only one column left and here I would want to have a title now for a title. 58 00:03:46,970 --> 00:03:49,250 Again, it's going to be a global class. 59 00:03:49,250 --> 00:03:55,310 So we're going to go with Clash of Title on Dev Van, heading to some kind of text. 60 00:03:55,700 --> 00:04:04,100 I'll say our story and then right next to the heading to we'll go with on the line which so so that's 61 00:04:04,100 --> 00:04:05,300 going to be on our line. 62 00:04:06,280 --> 00:04:12,670 In a trial and then right after a day of let's go with paragraph and some kind of text, 30 words, 63 00:04:12,670 --> 00:04:14,290 20 words, whatever you want. 64 00:04:14,620 --> 00:04:19,790 So I, I'm going to go with 30 or seven and there is my paragraph. 65 00:04:20,080 --> 00:04:23,290 So now, of course, we would just need to set up that page. 66 00:04:24,040 --> 00:04:31,120 So let's navigate back to our components and we're looking for the page hero component. 67 00:04:31,600 --> 00:04:39,300 And this component eventually will take it to perhaps, but for the time being, it will just take one. 68 00:04:39,340 --> 00:04:40,810 And that is going to be the title. 69 00:04:41,170 --> 00:04:47,200 So essentially the title is going to be the current page, because this is going to be the link that 70 00:04:47,200 --> 00:04:49,830 always points back to the home page. 71 00:04:49,840 --> 00:04:54,280 But as we're navigating two different pages, notice how this is changing. 72 00:04:54,490 --> 00:04:58,300 So this will just let the user know what what is the current page? 73 00:04:58,570 --> 00:05:04,870 That's why I'll write a way pass in and I'll say that, of course, it's going to be about four different 74 00:05:04,870 --> 00:05:05,220 pages. 75 00:05:05,230 --> 00:05:07,460 Of course, the value will be different. 76 00:05:07,780 --> 00:05:09,000 So we have the page here. 77 00:05:09,250 --> 00:05:11,710 The moment, of course, we're not handling the title. 78 00:05:11,720 --> 00:05:12,930 That's why we cannot see anything. 79 00:05:13,300 --> 00:05:19,480 And of course, now I will navigate back to my components and I'm looking for page zero. 80 00:05:20,410 --> 00:05:29,560 And I'll structure right away my prop, so central and and here I have the wrapper, so I have styled 81 00:05:29,560 --> 00:05:30,060 component. 82 00:05:30,400 --> 00:05:40,090 And as far as the return, well we'll go with d'Hiv and add again section Sinterklaas that just make 83 00:05:40,090 --> 00:05:46,810 sure that we always have the same with whether that is the section or page or whatever. 84 00:05:47,230 --> 00:05:50,320 And then inside of it we're going to go with heading three. 85 00:05:50,680 --> 00:05:56,290 And first I would want to place that homelike and then eventually I'll place my title. 86 00:05:56,630 --> 00:06:02,530 So the way it's going to look, we're going to go with a link to and then forward slash and we'll place 87 00:06:02,530 --> 00:06:03,250 a link here. 88 00:06:03,620 --> 00:06:04,240 That's right. 89 00:06:04,490 --> 00:06:05,950 That should be our page here. 90 00:06:06,250 --> 00:06:15,010 And now I would want to display that title, which is going to change as we navigate from page to page. 91 00:06:15,580 --> 00:06:23,140 So right after the link, let's go here we have a fourth and say that we would want to display the title, 92 00:06:23,170 --> 00:06:25,630 which, of course, in this case is going to be about. 93 00:06:25,870 --> 00:06:29,410 So now once we click on Home Mervis, we navigate back home. 94 00:06:29,710 --> 00:06:36,850 And if we go to about, we have home and then for about an while, we're still in the road. 95 00:06:37,860 --> 00:06:44,860 Think we can do the same thing in the check out page, so let's navigate to the pages directory. 96 00:06:46,080 --> 00:06:48,390 And it is right here somewhere. 97 00:06:48,750 --> 00:06:55,070 Check out Page again, I have the page here and I'm not going to look for any kind of props. 98 00:06:55,320 --> 00:07:05,060 Again, I will use the main and inside of this main, we're just going to go with a page hero and say 99 00:07:05,100 --> 00:07:08,010 title is going to be in this case, check out. 100 00:07:08,010 --> 00:07:13,920 Of course, we can close the component and we'll use my wrapper, which at the moment doesn't have any 101 00:07:13,920 --> 00:07:18,600 styling of class name and by the way, allowed here class name of page. 102 00:07:18,930 --> 00:07:22,050 So essentially it takes up the rest of the screen. 103 00:07:22,380 --> 00:07:23,370 So I'm a wrapper. 104 00:07:23,370 --> 00:07:24,960 I add my global class. 105 00:07:25,290 --> 00:07:31,250 And now once we navigate through a check out page, we also should see the home on the checkout. 106 00:07:31,470 --> 00:07:35,100 And at the moment it's not taking up the whole page. 107 00:07:35,310 --> 00:07:40,350 And maybe be the reason for that is because I don't have class name, let's say, once we have that. 108 00:07:40,350 --> 00:07:41,180 Yep, there it is. 109 00:07:41,370 --> 00:07:43,320 Now, of course, we'll display our checkout. 110 00:07:43,650 --> 00:07:46,110 So in here, let's just add maybe having one. 111 00:07:47,330 --> 00:07:54,920 Where it will say check out, yeah, and there is now, of course, we can save it and we have some 112 00:07:54,920 --> 00:08:01,280 kind of value in the content as well, that should do it for about Check-Out. 113 00:08:01,590 --> 00:08:08,540 Now, we can start working on the home page where we have the main hero and we'll skip the featured 114 00:08:08,540 --> 00:08:14,690 product because we need to set up the functionality where we actually fetch them in the product context 115 00:08:15,020 --> 00:08:18,580 moussab services and we'll set up the newsletter. 116 00:08:19,070 --> 00:08:25,730 So all the easy peasy ones first and then we'll start tackling the big beast, the product.