1 00:00:02,000 --> 00:00:03,000 [Maximillian Schwarzmuller] So now 2 00:00:03,000 --> 00:00:06,000 we added the dose four pages. 3 00:00:06,000 --> 00:00:09,000 It's now time to start filling them with some life. 4 00:00:09,000 --> 00:00:10,000 And it's of course up to you 5 00:00:10,000 --> 00:00:13,000 with which page you wanna start. 6 00:00:13,000 --> 00:00:16,000 Now I'll start very classic with the starting page 7 00:00:16,000 --> 00:00:21,000 with the HomePage here, and I'll start populating that page. 8 00:00:21,000 --> 00:00:23,000 And on this HomePage, I wanna do two things. 9 00:00:23,000 --> 00:00:26,000 I wanna output two things. 10 00:00:26,000 --> 00:00:29,000 The first thing that should be rendered 11 00:00:29,000 --> 00:00:31,000 is like a Hero section. 12 00:00:31,000 --> 00:00:33,000 And that's just how we typically call that. 13 00:00:33,000 --> 00:00:38,000 It's this wall -- section where we present our main product 14 00:00:38,000 --> 00:00:42,000 or in the case of a blog, maybe ourselves. 15 00:00:42,000 --> 00:00:47,000 So that's this hero section where we present ourselves. 16 00:00:47,000 --> 00:00:52,000 And then the second part is the Featured Posts section. 17 00:00:52,000 --> 00:00:56,000 Now we have no posts yet, but we can still start working 18 00:00:56,000 --> 00:01:00,000 on that and just output some dummy content for the moment. 19 00:01:00,000 --> 00:01:03,000 And we'll then replace the dummy content 20 00:01:03,000 --> 00:01:06,000 with actual posts once we have some. 21 00:01:07,000 --> 00:01:11,000 So these are the two kinds of things I wanna output here 22 00:01:11,000 --> 00:01:15,000 and therefore in the component where we returned JSX, 23 00:01:15,000 --> 00:01:20,000 I wanna have two main sections that will be output here. 24 00:01:20,000 --> 00:01:24,000 Now I want to keep my page component relatively lean 25 00:01:24,000 --> 00:01:27,000 and not put too much markup in here. 26 00:01:27,000 --> 00:01:30,000 I also don't wanna add a Styling file 27 00:01:30,000 --> 00:01:32,000 for the page component. 28 00:01:32,000 --> 00:01:34,000 That is something you don't have to do 29 00:01:34,000 --> 00:01:36,000 but something you will often see, 30 00:01:36,000 --> 00:01:40,000 that page components are relatively lean focus 31 00:01:40,000 --> 00:01:44,000 on getting data with getStaticProps if they need to, 32 00:01:44,000 --> 00:01:46,000 something we will add later, 33 00:01:46,000 --> 00:01:51,000 and don't do too much regarding styling or HTML. 34 00:01:51,000 --> 00:01:54,000 Instead we use separate React components for that, 35 00:01:54,000 --> 00:01:59,000 and we then just use those separate React components here. 36 00:01:59,000 --> 00:02:00,000 So in the HomePage component 37 00:02:00,000 --> 00:02:04,000 we could want to output a Hero component side 38 00:02:04,000 --> 00:02:07,000 by side to a Featured Posts component. 39 00:02:07,000 --> 00:02:12,000 And of course, we would need to wrap this with a fragment. 40 00:02:12,000 --> 00:02:16,000 So with this Fragment component provided by React, 41 00:02:16,000 --> 00:02:18,000 since we're not allowed to 42 00:02:18,000 --> 00:02:21,000 have adjacent JSX elements otherwise. 43 00:02:22,000 --> 00:02:23,000 Now of course, such a Hero 44 00:02:23,000 --> 00:02:26,000 and Featured Posts component doesn't exist yet. 45 00:02:26,000 --> 00:02:30,000 And hence, it's now our job to create it. 46 00:02:30,000 --> 00:02:33,000 And therefore I'll add a brand new Components folder 47 00:02:33,000 --> 00:02:35,000 on the root project level. 48 00:02:35,000 --> 00:02:38,000 So side by side to the Pages folder 49 00:02:38,000 --> 00:02:41,000 and the goal of this folder is to store all the 50 00:02:41,000 --> 00:02:46,000 individual components that will be used in this project. 51 00:02:46,000 --> 00:02:49,000 And in here, I'll add a new folder 52 00:02:49,000 --> 00:02:53,000 the HomePage folder, because I wanna store 53 00:02:53,000 --> 00:02:56,000 the HomePage specific components in there. 54 00:02:56,000 --> 00:03:00,000 You can of course name this folder however you want though. 55 00:03:00,000 --> 00:03:03,000 But I'll create that HomePage folder 56 00:03:03,000 --> 00:03:04,000 in the Components folder. 57 00:03:04,000 --> 00:03:09,000 And inside of that HomePage folder, I'll add two components. 58 00:03:10,000 --> 00:03:15,000 The Hero component, and this Featured Posts component. 59 00:03:16,000 --> 00:03:21,000 Now both components will also need some styling. 60 00:03:21,000 --> 00:03:24,000 And since this is still no CSS course, 61 00:03:24,000 --> 00:03:28,000 and I don't wanna bore you with writing CSS styles 62 00:03:28,000 --> 00:03:31,000 you find styling files attached. 63 00:03:31,000 --> 00:03:34,000 Attached you find two CSS files, 64 00:03:34,000 --> 00:03:39,000 featured-posts.module.CSS and hero module.CSS. 65 00:03:39,000 --> 00:03:43,000 And you should just download those two CSS files 66 00:03:43,000 --> 00:03:45,000 and add them in that HomePage folder 67 00:03:45,000 --> 00:03:48,000 in the Components folder side-by-side 68 00:03:48,000 --> 00:03:51,000 to these two JavaScript files 69 00:03:51,000 --> 00:03:53,000 because we're going to use these styles. 70 00:03:53,000 --> 00:03:57,000 Now, of course you are free to bring your own styles 71 00:03:57,000 --> 00:03:59,000 and tweak everything in the way you want. 72 00:03:59,000 --> 00:04:03,000 These are just some basic styles which we can use 73 00:04:03,000 --> 00:04:05,000 so that we don't have to write our own styles. 74 00:04:06,000 --> 00:04:09,000 Now, one important word about those styles though, 75 00:04:09,000 --> 00:04:11,000 in there in those files, 76 00:04:11,000 --> 00:04:15,000 I'm using a feature called CSS variables. 77 00:04:15,000 --> 00:04:18,000 I am extracting certain values like colors 78 00:04:18,000 --> 00:04:23,000 but also sizes and dimensions from CSS variables. 79 00:04:24,000 --> 00:04:29,000 And these CSS variables are defined in the Globals CSS file 80 00:04:30,000 --> 00:04:32,000 which I gave you right from the start. 81 00:04:32,000 --> 00:04:34,000 So, which was part of the starting project 82 00:04:34,000 --> 00:04:36,000 you found in the last lectures. 83 00:04:37,000 --> 00:04:40,000 And the interesting thing about CS modules is 84 00:04:40,000 --> 00:04:44,000 that we now have one place where we can define 85 00:04:44,000 --> 00:04:48,000 and manage our colors and our sizes. 86 00:04:48,000 --> 00:04:50,000 And when we change it here 87 00:04:50,000 --> 00:04:53,000 it will affect the entire application. 88 00:04:53,000 --> 00:04:56,000 Now this is totally independent from Next.js 89 00:04:56,000 --> 00:04:59,000 This is a default CSS feature. 90 00:04:59,000 --> 00:05:00,000 I'm just using it here, 91 00:05:00,000 --> 00:05:02,000 and I want to make you aware of that 92 00:05:02,000 --> 00:05:05,000 in case you look into my CSS files 93 00:05:05,000 --> 00:05:09,000 and wonder what these strange things are. 94 00:05:09,000 --> 00:05:11,000 Now, that means that of course you can also 95 00:05:11,000 --> 00:05:14,000 easily tweak your dimensions and colors 96 00:05:14,000 --> 00:05:19,000 by simply changing the values in the Globals CSS file. 97 00:05:20,000 --> 00:05:22,000 But with that out of the way, let's go 98 00:05:22,000 --> 00:05:25,000 to the hero.js file and let's start working 99 00:05:25,000 --> 00:05:27,000 on that and let's build that Hero component.