All language subtitles for 004 Adding The _Hero_ Component_Downloadly.ir_en

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.