Nicely done.
And now it's navigate to the homepage, which currently just has the heading for with the text on one
page and notice how I'm importing few components.
I have feature products.
I have hero services and contact.
And that's one of the things that I always like to do when I'm setting up my project.
I always like to set up my components right away.
So I know that eventually in my home page, I'm going to have some kind of hero or high feature product
services and newsletter.
So what I do in the beginning, I just set up the page.
Now, I'm not the biggest fan of adding too much success or too much functionality in the actual page,
but that is my personal preference.
Now, there are some exceptions.
Of course, if I see that it makes more sense to set up all the functionality in one place, then I
definitely do it.
Or if I don't know, the return or functionality is very simple.
Like, for example, here I just went with page zero and then the rest of the content was right inside
the about page.
Now the one page where I'll set up all the functionality as well as a return, which is going to be
bigger, is of course going to be the single product page.
But don't worry, we're going to get there in no time.
So let's start here with the home page.
And we just want to render these components.
And then once we render them effectively, we're done in the home page component and then we can slowly
start working on each separate component.
So I'll start with the main and by the way, I'll navigate there as well just so we can see what we're
doing.
So we have the main inside of the main.
I would want to render those components one by one.
So hero first, then we're going to go with featured product.
And after that we'll have services.
And lastly, we'll have contact component contact online component will save.
And that's at our work.
And the home page is done.
So now, of course.
I would probably want to close all my files as well as the structure here, and we'll just navigate
to the source, we're looking for components and you guessed it, we're looking for the hero now for
the hero.
We're importing style since, of course, I would want to set it up as a component and notice this is
that we're using or here.
And then I have a link because eventually there's going to be a link to a product page.
So and also have two images.
One, the main one hero, BCG.
And here I just got lazy and I went with Hero big number two.
And as far as the naming the same hero big and hero BTG too.
And I'm going to start with my return.
We're going to go with the rapper.
So we're turning our styled component.
And I'm going to add to right away that with that global with which is sitting in the section Sinterklaas.
And then I'm going to have the article.
And in this case, I will add a class of content and as a side note, that's one of the reasons why
I enjoy using the stealth component, because I don't have to worry about the name collisions in here.
I can just simply go with content.
So with a very generic class name and then I can use it on all my components.
I know I mentioned this probably a lot by this time, but again, I just want to emphasize one of the
main reasons why I enjoy using styled components.
And instead of the content, we're going to go with heading one here and we'll just say design and then
your and I would want to get a line break as well.
So set up my line break element and we'll say comfort and then a zone.
And of it we should say something like, this is great, beautiful.
And then also I would want to add the paragraph here and we'll go with Lorem, I don't know, 20 again,
whatever text you would want to play here.
And then lastly, we have a link here.
So we're going to go link and again, you can point the link wherever you would like, I'm going to
point to a product page and I'll add a class name here on Sabetha.
And so that's going to be my global class for buttons.
And I'll also add this hero button because I'll add a little bit of different styling inside of this
compound.
So I'm targeting this class and I'm just making this button bigger, effectively.
And then instead of this like let's just say shop, not show, shop now.
OK, so and that's our first article and we'll only display the text on a small screen.
But then once we get to the big screen, I also want to display the image.
So we go here with IMG container, essentially the article with a class of AMG container.
And in here I would just want to place two images.
One is going to be the hero BCG and then the second one is hero BCG number two.
So let's go with hero BCG.
That's the name of my variable.
I'll say that this is a nice table and we do need to add a class since there's a little bit of styling
and we're going to go with class name and it's going to be equal to main main hyphen.
AMG will copy and paste and let's just change these around.
It's going to be hero BCG number two.
And as far as the.
I'll say person working.
Working here for class and say accent, I'm so the class name is this one.
Make sure that it matches exactly what I have inside of the stealth component.
If you don't have the same lock, just double check the class names again.
Don't worry about this one.
This will fix itself once we get to the more components at the.
And what we should worry about is whether we have the same lock when we navigate here.
That is more about Page.
And by the way, I probably would want to add more text.
Right.
So sorry, little detour and navigate to where it is, where it is about Paige.
And I don't know, instead of this 30, I'm going to go with 50.
I think it's going to look a little bit better, myself and the others.
I have a little bit more text now.
What I'm interested in is my homepage and nerdish.
So this is how it's going to look on a big screen.
And once we get to the small screen, of course, we'll have this type of look.
So it looks somewhat good.
I think now we can focus on next component's.