[Maximillian Schwarzmuller] So now
we added the dose four pages.
It's now time to start filling them with some life.
And it's of course up to you
with which page you wanna start.
Now I'll start very classic with the starting page
with the HomePage here, and I'll start populating that page.
And on this HomePage, I wanna do two things.
I wanna output two things.
The first thing that should be rendered
is like a Hero section.
And that's just how we typically call that.
It's this wall -- section where we present our main product
or in the case of a blog, maybe ourselves.
So that's this hero section where we present ourselves.
And then the second part is the Featured Posts section.
Now we have no posts yet, but we can still start working
on that and just output some dummy content for the moment.
And we'll then replace the dummy content
with actual posts once we have some.
So these are the two kinds of things I wanna output here
and therefore in the component where we returned JSX,
I wanna have two main sections that will be output here.
Now I want to keep my page component relatively lean
and not put too much markup in here.
I also don't wanna add a Styling file
for the page component.
That is something you don't have to do
but something you will often see,
that page components are relatively lean focus
on getting data with getStaticProps if they need to,
something we will add later,
and don't do too much regarding styling or HTML.
Instead we use separate React components for that,
and we then just use those separate React components here.
So in the HomePage component
we could want to output a Hero component side
by side to a Featured Posts component.
And of course, we would need to wrap this with a fragment.
So with this Fragment component provided by React,
since we're not allowed to
have adjacent JSX elements otherwise.
Now of course, such a Hero
and Featured Posts component doesn't exist yet.
And hence, it's now our job to create it.
And therefore I'll add a brand new Components folder
on the root project level.
So side by side to the Pages folder
and the goal of this folder is to store all the
individual components that will be used in this project.
And in here, I'll add a new folder
the HomePage folder, because I wanna store
the HomePage specific components in there.
You can of course name this folder however you want though.
But I'll create that HomePage folder
in the Components folder.
And inside of that HomePage folder, I'll add two components.
The Hero component, and this Featured Posts component.
Now both components will also need some styling.
And since this is still no CSS course,
and I don't wanna bore you with writing CSS styles
you find styling files attached.
Attached you find two CSS files,
featured-posts.module.CSS and hero module.CSS.
And you should just download those two CSS files
and add them in that HomePage folder
in the Components folder side-by-side
to these two JavaScript files
because we're going to use these styles.
Now, of course you are free to bring your own styles
and tweak everything in the way you want.
These are just some basic styles which we can use
so that we don't have to write our own styles.
Now, one important word about those styles though,
in there in those files,
I'm using a feature called CSS variables.
I am extracting certain values like colors
but also sizes and dimensions from CSS variables.
And these CSS variables are defined in the Globals CSS file
which I gave you right from the start.
So, which was part of the starting project
you found in the last lectures.
And the interesting thing about CS modules is
that we now have one place where we can define
and manage our colors and our sizes.
And when we change it here
it will affect the entire application.
Now this is totally independent from Next.js
This is a default CSS feature.
I'm just using it here,
and I want to make you aware of that
in case you look into my CSS files
and wonder what these strange things are.
Now, that means that of course you can also
easily tweak your dimensions and colors
by simply changing the values in the Globals CSS file.
But with that out of the way, let's go
to the hero.js file and let's start working
on that and let's build that Hero component.