1 00:00:00,360 --> 00:00:00,930 Nicely done. 2 00:00:01,320 --> 00:00:08,970 And now it's navigate to the homepage, which currently just has the heading for with the text on one 3 00:00:08,970 --> 00:00:12,170 page and notice how I'm importing few components. 4 00:00:12,180 --> 00:00:13,350 I have feature products. 5 00:00:13,350 --> 00:00:15,920 I have hero services and contact. 6 00:00:16,290 --> 00:00:21,150 And that's one of the things that I always like to do when I'm setting up my project. 7 00:00:21,480 --> 00:00:24,600 I always like to set up my components right away. 8 00:00:25,020 --> 00:00:30,420 So I know that eventually in my home page, I'm going to have some kind of hero or high feature product 9 00:00:30,660 --> 00:00:32,260 services and newsletter. 10 00:00:32,610 --> 00:00:35,940 So what I do in the beginning, I just set up the page. 11 00:00:36,210 --> 00:00:44,100 Now, I'm not the biggest fan of adding too much success or too much functionality in the actual page, 12 00:00:44,430 --> 00:00:46,110 but that is my personal preference. 13 00:00:46,470 --> 00:00:47,910 Now, there are some exceptions. 14 00:00:47,910 --> 00:00:54,330 Of course, if I see that it makes more sense to set up all the functionality in one place, then I 15 00:00:54,340 --> 00:00:54,990 definitely do it. 16 00:00:55,440 --> 00:00:59,610 Or if I don't know, the return or functionality is very simple. 17 00:00:59,850 --> 00:01:06,450 Like, for example, here I just went with page zero and then the rest of the content was right inside 18 00:01:06,450 --> 00:01:07,320 the about page. 19 00:01:07,740 --> 00:01:12,780 Now the one page where I'll set up all the functionality as well as a return, which is going to be 20 00:01:12,780 --> 00:01:15,860 bigger, is of course going to be the single product page. 21 00:01:15,870 --> 00:01:19,140 But don't worry, we're going to get there in no time. 22 00:01:19,440 --> 00:01:21,720 So let's start here with the home page. 23 00:01:21,760 --> 00:01:24,330 And we just want to render these components. 24 00:01:24,420 --> 00:01:30,090 And then once we render them effectively, we're done in the home page component and then we can slowly 25 00:01:30,090 --> 00:01:33,160 start working on each separate component. 26 00:01:33,570 --> 00:01:37,830 So I'll start with the main and by the way, I'll navigate there as well just so we can see what we're 27 00:01:37,830 --> 00:01:38,160 doing. 28 00:01:38,470 --> 00:01:41,190 So we have the main inside of the main. 29 00:01:41,490 --> 00:01:43,870 I would want to render those components one by one. 30 00:01:43,890 --> 00:01:48,120 So hero first, then we're going to go with featured product. 31 00:01:48,600 --> 00:01:50,810 And after that we'll have services. 32 00:01:51,210 --> 00:01:59,070 And lastly, we'll have contact component contact online component will save. 33 00:01:59,430 --> 00:02:00,930 And that's at our work. 34 00:02:00,930 --> 00:02:03,000 And the home page is done. 35 00:02:03,390 --> 00:02:04,080 So now, of course. 36 00:02:04,960 --> 00:02:11,950 I would probably want to close all my files as well as the structure here, and we'll just navigate 37 00:02:11,950 --> 00:02:17,800 to the source, we're looking for components and you guessed it, we're looking for the hero now for 38 00:02:17,800 --> 00:02:18,390 the hero. 39 00:02:18,520 --> 00:02:24,730 We're importing style since, of course, I would want to set it up as a component and notice this is 40 00:02:25,030 --> 00:02:26,890 that we're using or here. 41 00:02:27,280 --> 00:02:34,270 And then I have a link because eventually there's going to be a link to a product page. 42 00:02:34,540 --> 00:02:36,550 So and also have two images. 43 00:02:36,970 --> 00:02:38,920 One, the main one hero, BCG. 44 00:02:38,980 --> 00:02:43,600 And here I just got lazy and I went with Hero big number two. 45 00:02:44,110 --> 00:02:49,030 And as far as the naming the same hero big and hero BTG too. 46 00:02:49,420 --> 00:02:51,310 And I'm going to start with my return. 47 00:02:51,430 --> 00:02:52,540 We're going to go with the rapper. 48 00:02:52,720 --> 00:02:55,210 So we're turning our styled component. 49 00:02:55,450 --> 00:03:02,110 And I'm going to add to right away that with that global with which is sitting in the section Sinterklaas. 50 00:03:02,740 --> 00:03:04,750 And then I'm going to have the article. 51 00:03:05,830 --> 00:03:12,760 And in this case, I will add a class of content and as a side note, that's one of the reasons why 52 00:03:12,760 --> 00:03:20,260 I enjoy using the stealth component, because I don't have to worry about the name collisions in here. 53 00:03:20,260 --> 00:03:22,350 I can just simply go with content. 54 00:03:22,990 --> 00:03:28,200 So with a very generic class name and then I can use it on all my components. 55 00:03:28,210 --> 00:03:35,170 I know I mentioned this probably a lot by this time, but again, I just want to emphasize one of the 56 00:03:35,170 --> 00:03:38,560 main reasons why I enjoy using styled components. 57 00:03:39,010 --> 00:03:46,480 And instead of the content, we're going to go with heading one here and we'll just say design and then 58 00:03:46,480 --> 00:03:49,530 your and I would want to get a line break as well. 59 00:03:49,990 --> 00:03:55,090 So set up my line break element and we'll say comfort and then a zone. 60 00:03:55,390 --> 00:04:00,010 And of it we should say something like, this is great, beautiful. 61 00:04:00,460 --> 00:04:07,210 And then also I would want to add the paragraph here and we'll go with Lorem, I don't know, 20 again, 62 00:04:07,360 --> 00:04:09,480 whatever text you would want to play here. 63 00:04:10,090 --> 00:04:12,310 And then lastly, we have a link here. 64 00:04:13,430 --> 00:04:19,670 So we're going to go link and again, you can point the link wherever you would like, I'm going to 65 00:04:19,670 --> 00:04:24,370 point to a product page and I'll add a class name here on Sabetha. 66 00:04:24,380 --> 00:04:26,660 And so that's going to be my global class for buttons. 67 00:04:26,900 --> 00:04:34,040 And I'll also add this hero button because I'll add a little bit of different styling inside of this 68 00:04:34,310 --> 00:04:34,740 compound. 69 00:04:34,760 --> 00:04:39,770 So I'm targeting this class and I'm just making this button bigger, effectively. 70 00:04:40,160 --> 00:04:45,080 And then instead of this like let's just say shop, not show, shop now. 71 00:04:45,280 --> 00:04:51,530 OK, so and that's our first article and we'll only display the text on a small screen. 72 00:04:51,710 --> 00:04:55,010 But then once we get to the big screen, I also want to display the image. 73 00:04:55,490 --> 00:05:02,530 So we go here with IMG container, essentially the article with a class of AMG container. 74 00:05:02,810 --> 00:05:06,560 And in here I would just want to place two images. 75 00:05:06,770 --> 00:05:12,280 One is going to be the hero BCG and then the second one is hero BCG number two. 76 00:05:12,890 --> 00:05:14,560 So let's go with hero BCG. 77 00:05:14,570 --> 00:05:15,920 That's the name of my variable. 78 00:05:16,220 --> 00:05:22,520 I'll say that this is a nice table and we do need to add a class since there's a little bit of styling 79 00:05:23,390 --> 00:05:28,670 and we're going to go with class name and it's going to be equal to main main hyphen. 80 00:05:28,900 --> 00:05:32,780 AMG will copy and paste and let's just change these around. 81 00:05:32,990 --> 00:05:35,960 It's going to be hero BCG number two. 82 00:05:36,470 --> 00:05:38,300 And as far as the. 83 00:05:40,290 --> 00:05:41,540 I'll say person working. 84 00:05:43,070 --> 00:05:51,990 Working here for class and say accent, I'm so the class name is this one. 85 00:05:52,250 --> 00:05:57,940 Make sure that it matches exactly what I have inside of the stealth component. 86 00:05:58,490 --> 00:06:02,240 If you don't have the same lock, just double check the class names again. 87 00:06:02,240 --> 00:06:03,350 Don't worry about this one. 88 00:06:03,980 --> 00:06:08,030 This will fix itself once we get to the more components at the. 89 00:06:08,280 --> 00:06:12,470 And what we should worry about is whether we have the same lock when we navigate here. 90 00:06:12,470 --> 00:06:14,020 That is more about Page. 91 00:06:14,030 --> 00:06:16,870 And by the way, I probably would want to add more text. 92 00:06:16,890 --> 00:06:17,110 Right. 93 00:06:17,630 --> 00:06:23,870 So sorry, little detour and navigate to where it is, where it is about Paige. 94 00:06:24,320 --> 00:06:28,370 And I don't know, instead of this 30, I'm going to go with 50. 95 00:06:29,060 --> 00:06:32,310 I think it's going to look a little bit better, myself and the others. 96 00:06:32,390 --> 00:06:34,570 I have a little bit more text now. 97 00:06:34,580 --> 00:06:37,100 What I'm interested in is my homepage and nerdish. 98 00:06:37,520 --> 00:06:39,590 So this is how it's going to look on a big screen. 99 00:06:39,860 --> 00:06:44,800 And once we get to the small screen, of course, we'll have this type of look. 100 00:06:45,320 --> 00:06:46,820 So it looks somewhat good. 101 00:06:47,090 --> 00:06:51,380 I think now we can focus on next component's.