Now that we finished the header,
let's continue working on this main page content,
on this starting page content.
And that means that we need to work on this page.js file
inside of the app folder.
So not any nested page.js file,
but this main root page.js file directly in the app folder.
Because that is that starting page we're seeing,
that's the page that's being rendered
if we visit our address slash nothing,
so if we have no segment thereafter.
And here on this page, I actually don't wanna have
the content we currently have there.
Instead, my goal is to have some header here,
so not the main navigation header,
but some nested page-specific header
that introduces users to this page, you could say.
And then below that, the main section of this page.
Now, since sibling JSX content is not allowed like this,
we have to wrap that into a fragment
in order to make this work.
I also prepared some styles which we can use here,
and therefore, attached, you'll find a page.module.css file.
And yes, you can use CSS modules on pages as well,
because in the end, that's also just
a regular component file.
Just treat it in a special way by Next.js.
But with that, we can import our classes
from this page.module.css file,
and then add a class to this header, for example,
to be precise at the header class here.
Now in that header, I then later wanna have a div,
which should receive a class of slideshow,
because here, we'll soon have a image slideshow,
or a couple of images that change automatically,
that simply show different food images.
So that's one thing.
In addition here, I'll add another div
below that other div here,
which contains two more divs,
where the first inner div here
will receive a class name of hero,
and that second div inside of a div
will receive a class name of cta for call to action.
Now, in that hero div here, I wanna have my h1 title
where I'll say, NextLevel Food for NextLevel Foodies,
or any other catchy phrase of your choice.
And below that, a paragraph where we could say,
taste and share food from all over the world.
So this is simply some marketing text here.
In that cta area, I then wanna have two links
that allow us to go to different places,
and I'm still importing that link component,
so we don't have to change anything there.
The first link should say, Join the Community,
and the href should point to that community page
with slash community.
And the second link should point to the meals page
and say, Explore Meals, like this.
And that's now my header on this page.
We'll work on that slideshow later.
Now, in that main area here, in that main section,
I just wanna have some dummy text,
which I prepared for you.
Attached, you'll find my page.js file,
which is the same file you see here,
just also with some extra sections added
into this main block here,
and you can simply copy and paste
those sections into your main area,
or copy and paste the entire file,
which you'll find attached.
Whatever you prefer.
With that done, you should see something
like this on the screen,
which I would say looks a lot better
than what we had before.
But of course here, we also have this blank space
where I wanna add that image slideshow,
and that is there for what we'll work on next.