In that hero.js file.
We wanna build this hero component.
So there's welcome component on the starting page
where we present ourselves and therefore, of course
create a functional component again and export that just
as we always did it throughout this course.
And now in this hero component
I wanna return a section.
So to standard section element.
And in that section
I then wanna have a couple of different elements.
I wanna have an image where I show myself
I wanna have some texts where I say hi, I'm Max.
And some texts below that, where I introduce myself
and write a couple of words about what this blog is about.
Now I'll wrap the image in a div for styling purposes
and we're going to add the actual image in a second.
Below that div I then wanna
have a h1 tag where I say, Hi, I'm Max.
And of course, plug in your name here.
And then below that a paragraph where I say something
like I blog about web development
especially front-end frameworks like Angular or React
something like this.
Of course feel free to fine tune this with your own texts
and later also with your own image.
Now we need some styling here.
And for div we added to this hero modules
CSS file and the effort to apply
it we should import our classes from that file
since we are using a .module.css file
we are using CSS modules
which means that the class is defined
in that file will be transformed to behind the scenes, such
that the styles effectively are scoped to this component.
And don't spill over to other components.
Even if we use the same elements and class name stair
that's a pretty nice feature
and that's why we're using it here.
We have used it throughout this course already though.
Now, which classes should be applied while on the section
you'd wanna add a class of hero, which is simply one
of the classes to find in the css file.
On that image div I'll, add a class of image.
And I don't have any classes on the h1
and paragraph elements, because these will be styled
with nested selectors inside of that css file.
Okay, so now we got this.
Now for the image I wanna use the next image component.
So when we get this automatically optimized image
which is automatically reduced in size
and where different images are then loaded
for different devices possibly.
And which is also lazy loaded.
And therefore we can import
the image component from next image
and of course, import should start with a lower case I,
and then we can use this image component here inside
of this image div.
Now this image component needs a couple of attributes
a couple of props.
It needs to know its source, so a path
to the image that should be loaded a path to the base image
which is then automatically optimized
and transformed by next.
A alt text where I will simply
say an image showing max, because I will soon add
an image that shows myself and then a width and a height.
And here you should kind of calculate
and estimate which width
and height you will need for your image.
Now regarding the image file
you find an example image attached, which you can use
but of course you can also bring your own image.
You don't have to use the one you find attached.
Attached you, however, find a max.png file and you can drag
and drop that into that public folder of your project.
Though, there, I will actually create a sub folder images
and in there I'll create another
sub folder, site and I'll then drag
this max.png file into that site folder.
Now I'll do that because soon I will
have another folder inside of images
side by side to the site folder
with the images for the block posts.
That's why I have to separate site sub folder
for images that belong to the site
but not to the blog posts.
For the moment of course,
it's the only image we have though
and now we wanna point at it with our image component.
So they have a source here
should be a path to that image.
Now you learned that the path you
construct here is ignoring the fact
that the image lives in a public folder.
Because content from the public folder is exposed
on the root level of the running website in the end.
So you don't need to dive into public here.
You shouldn't dive into public here.
Instead, this path can start on your route level
and then just directly dive into images and then into site
and then in my case point, that max.png
since that's the image file.
Now since we're using the next image component
we also should find the width
and height we want here since that is required by next image
to produce the optimized images
because it will then automatically shrink the base image
which might be much bigger to that width and height.
And it will also reduce the quality and much more.
And here a width and height
of roughly 300 pixels should work.
We can then still overwrite the actual size
of the image with css by targeting
it with certain css rules and changing width and height.
But of course the width and height you use here
should be close to the actual width and height.
You then render on the screen
since otherwise you just waste size.
If you load a pretty big image here
and then you would use css code to render it with 100 pixels
width and height, then you would just load a too big image
even though you don't need it.
On the upper hand if you load a too small image
and you then use CSS to render a large image
it would also be bad because then you would lose quality.
That's why you wanna get close
to the actual image you need.
And the image component is pretty flexible.
And in case your image can't have different sizes depending
on the screen size and so on.
You can always dive
into the next image article to learn about different ways
of configuring the image, specifically the layout prop
which also allows you to define an image which can scale
up and down with the viewport, with the responsive layout.
By default, the image will have a layout of intrinsic
and that will scale the image down to smaller view ports
but not up for bigger view ports.
So it will not produce any bigger images than the width
and height we set here.
And that will make sense
for this application for the way we use the image here.
So long story short with that, we set
up the image with a certain width and height.
We got our other content, and now we
wanna use that hero component on the starting page.
Now I am already rendering it here.
Now we just need to import it.
So we import Hero from and then let's
go up one level, dive
Into /components/home-page/ hero to import
this component into the homepage.
And I'll then get rid of the featured posts for the moment
since we haven't populated that component yet.
With that if we now run our development server
with npm run dev we can visit local host free thousand
and we should see this on the screen.
This is this hero section with the styles I provided to you
with the image I provided to you, or with your own image
if you brought your own image.
And that's looking good
that's working now, let's take the next steps
and let's continue working on this website.