1
00:00:00,000 --> 00:00:02,000
Now that we finished the header,

2
00:00:02,000 --> 00:00:05,000
let's continue working on this main page content,

3
00:00:05,000 --> 00:00:07,000
on this starting page content.

4
00:00:07,000 --> 00:00:11,000
And that means that we need to work on this page.js file

5
00:00:11,000 --> 00:00:13,000
inside of the app folder.

6
00:00:13,000 --> 00:00:15,000
So not any nested page.js file,

7
00:00:15,000 --> 00:00:20,000
but this main root page.js file directly in the app folder.

8
00:00:20,000 --> 00:00:22,000
Because that is that starting page we're seeing,

9
00:00:22,000 --> 00:00:24,000
that's the page that's being rendered

10
00:00:24,000 --> 00:00:27,000
if we visit our address slash nothing,

11
00:00:27,000 --> 00:00:30,000
so if we have no segment thereafter.

12
00:00:30,000 --> 00:00:34,000
And here on this page, I actually don't wanna have

13
00:00:34,000 --> 00:00:36,000
the content we currently have there.

14
00:00:36,000 --> 00:00:40,000
Instead, my goal is to have some header here,

15
00:00:40,000 --> 00:00:41,000
so not the main navigation header,

16
00:00:41,000 --> 00:00:44,000
but some nested page-specific header

17
00:00:44,000 --> 00:00:48,000
that introduces users to this page, you could say.

18
00:00:48,000 --> 00:00:51,000
And then below that, the main section of this page.

19
00:00:51,000 --> 00:00:55,000
Now, since sibling JSX content is not allowed like this,

20
00:00:55,000 --> 00:00:57,000
we have to wrap that into a fragment

21
00:00:57,000 --> 00:00:58,000
in order to make this work.

22
00:01:00,000 --> 00:01:03,000
I also prepared some styles which we can use here,

23
00:01:03,000 --> 00:01:08,000
and therefore, attached, you'll find a page.module.css file.

24
00:01:08,000 --> 00:01:12,000
And yes, you can use CSS modules on pages as well,

25
00:01:12,000 --> 00:01:13,000
because in the end, that's also just

26
00:01:13,000 --> 00:01:15,000
a regular component file.

27
00:01:15,000 --> 00:01:19,000
Just treat it in a special way by Next.js.

28
00:01:20,000 --> 00:01:22,000
But with that, we can import our classes

29
00:01:22,000 --> 00:01:27,000
from this page.module.css file,

30
00:01:27,000 --> 00:01:30,000
and then add a class to this header, for example,

31
00:01:30,000 --> 00:01:33,000
to be precise at the header class here.

32
00:01:35,000 --> 00:01:38,000
Now in that header, I then later wanna have a div,

33
00:01:38,000 --> 00:01:41,000
which should receive a class of slideshow,

34
00:01:41,000 --> 00:01:45,000
because here, we'll soon have a image slideshow,

35
00:01:45,000 --> 00:01:48,000
or a couple of images that change automatically,

36
00:01:48,000 --> 00:01:51,000
that simply show different food images.

37
00:01:51,000 --> 00:01:52,000
So that's one thing.

38
00:01:54,000 --> 00:01:58,000
In addition here, I'll add another div

39
00:01:58,000 --> 00:02:00,000
below that other div here,

40
00:02:00,000 --> 00:02:03,000
which contains two more divs,

41
00:02:04,000 --> 00:02:06,000
where the first inner div here

42
00:02:06,000 --> 00:02:10,000
will receive a class name of hero,

43
00:02:12,000 --> 00:02:15,000
and that second div inside of a div

44
00:02:15,000 --> 00:02:20,000
will receive a class name of cta for call to action.

45
00:02:21,000 --> 00:02:25,000
Now, in that hero div here, I wanna have my h1 title

46
00:02:25,000 --> 00:02:30,000
where I'll say, NextLevel Food for NextLevel Foodies,

47
00:02:32,000 --> 00:02:35,000
or any other catchy phrase of your choice.

48
00:02:35,000 --> 00:02:38,000
And below that, a paragraph where we could say,

49
00:02:38,000 --> 00:02:42,000
taste and share food from all over the world.

50
00:02:43,000 --> 00:02:46,000
So this is simply some marketing text here.

51
00:02:47,000 --> 00:02:51,000
In that cta area, I then wanna have two links

52
00:02:51,000 --> 00:02:53,000
that allow us to go to different places,

53
00:02:53,000 --> 00:02:56,000
and I'm still importing that link component,

54
00:02:56,000 --> 00:02:58,000
so we don't have to change anything there.

55
00:02:59,000 --> 00:03:03,000
The first link should say, Join the Community,

56
00:03:04,000 --> 00:03:07,000
and the href should point to that community page

57
00:03:07,000 --> 00:03:09,000
with slash community.

58
00:03:10,000 --> 00:03:13,000
And the second link should point to the meals page

59
00:03:13,000 --> 00:03:18,000
and say, Explore Meals, like this.

60
00:03:22,000 --> 00:03:25,000
And that's now my header on this page.

61
00:03:25,000 --> 00:03:27,000
We'll work on that slideshow later.

62
00:03:29,000 --> 00:03:33,000
Now, in that main area here, in that main section,

63
00:03:33,000 --> 00:03:35,000
I just wanna have some dummy text,

64
00:03:35,000 --> 00:03:38,000
which I prepared for you.

65
00:03:38,000 --> 00:03:40,000
Attached, you'll find my page.js file,

66
00:03:40,000 --> 00:03:42,000
which is the same file you see here,

67
00:03:42,000 --> 00:03:45,000
just also with some extra sections added

68
00:03:45,000 --> 00:03:48,000
into this main block here,

69
00:03:48,000 --> 00:03:49,000
and you can simply copy and paste

70
00:03:49,000 --> 00:03:51,000
those sections into your main area,

71
00:03:51,000 --> 00:03:53,000
or copy and paste the entire file,

72
00:03:53,000 --> 00:03:54,000
which you'll find attached.

73
00:03:54,000 --> 00:03:56,000
Whatever you prefer.

74
00:03:59,000 --> 00:04:01,000
With that done, you should see something

75
00:04:01,000 --> 00:04:02,000
like this on the screen,

76
00:04:02,000 --> 00:04:04,000
which I would say looks a lot better

77
00:04:04,000 --> 00:04:06,000
than what we had before.

78
00:04:07,000 --> 00:04:10,000
But of course here, we also have this blank space

79
00:04:10,000 --> 00:04:13,000
where I wanna add that image slideshow,

80
00:04:13,000 --> 00:04:16,000
and that is there for what we'll work on next.