Nice work.
And once we've got our page here in place next hour, we want to work on services.
So they feature products for now because I would want to fetch them first.
And the way we're going to do that is by going, of course, to the services component.
That's the one we're looking for.
And yep, I have services.
That's why it is displayed.
But of course, I would want to set up my styled component, which is going to be a wrapper, and this
is going to be the case where technically.
If you want, you can hard code these values and tell you honestly, there's nothing that stopping you
from doing that because we won't use those services in different places.
It's not like with links where it definitely makes sense to set them up in a separate place and then
just iterate over.
But I still prefer setting up some kind of array in a separate file, and that way I can separate two
concerns.
I have data in one place, which is going to be the icon, the title, as well as the text and then
in the services.
I only worry about our rendering.
And in order to check out the services, essentially, all right, we will need to navigate to utils
and then constant.
That's where we have our links.
Correct.
And we're going to do that by going, of course, to the hotels and to the constants.
And in here, yep, we have the links, but we also have services.
Now, what's different about services that I imported, these icons are right here.
So I import them from react icons, whichever icons you like.
And then when I'm setting up that service, still the object I have property by the name of Icon, which
I set it equal to my component to the Iraqi component, which is an icon.
And the notice, again, we have a list.
So we are ready, we have title and then we have the text as well.
No one gottsch about this one you must import react in this case since you have the react component.
When we worked with Lynch, we didn't need react.
This is just simple JavaScript data.
Now when we are setting up this type of structure where one of the properties is area component, you
must import Riak.
That's one of the gotchas that you need to know if you're setting up your data this way.
And once we're familiar with how our data is structured, which I navigate back, are important since
it is a named export and then I would want to set up my return.
Where instead of my rapper, I'm going to go with the off with a class of S. center again just for the
West, and then we're going to have two articles.
One is going to be or, you know, it's going to be one article and one they're my apologies.
So we're going to go over here.
We're going to say that there was this article and class is better and that inside of this article,
we're going to go with Harring three and we'll say custom.
Hopefully misspellings, correct, then I'll set up another line break just because I enjoy line break
elements built only for you.
Let's see what we've got.
All right.
There is that is our having three then right next to it.
I'm going to go with my paragraph.
In this case, I'm going to go with 20 words thing that you do it.
And then, like I said right next to it, I would want to have Div with a class name.
So I have one article.
Don't place it inside of the article, but we're going to go with Services and Center.
So this is Section Center and this is Ceressus Center.
And of course you can already guess that services center will be styled over here.
So the section center warns that global one.
Now I lost my suggestion and if that happens to you, remember that the shortcut is control and space,
at least in my book, where I can get my suggestion back and now I have my def and the only thing I
need to do is just iterate over services, something we have done.
I want to say a thousand times, not, of course, but I think maybe even more so, we're going to go
here with single service.
Now, I'm referencing that object.
What properties do I want?
Well, I want that.
I want icon.
I want title and I want tax.
Correct.
And that is all coming from Cerveris.
You guessed it correctly.
And as far as the return we go with Artecoll over here and right away a key and I want to add a little
bit of styling.
So add class name of service service over here.
And then instead of this article, let's go with spane.
And this one will also have the class name, the class name will be Icon, scroll down just so we can
see a bit clearer.
And inside of the span, we're going to go with Icon like so I'll say it.
I should see my icons.
There it is.
And then I just need to have the title and the text.
So here.
Let's run the title and also let's are under this paragraph, and I'm going to be looking for the text,
so surrender all of them.
We have our services to navigate to the big screen.
The moment we have the hero, we have featured products.
And there is now we have these services.
Now, don't worry about this current look.
Don't freak out.
It's done on purpose because notice here, when I have the newsletter, I would want to have those services
kind of going into that particular section.
So once I get to certain screen size, I just increase the padding on newsletter and make sure that
my whole services section moves down a little bit.
Then just to see a system that has nothing to do with our functionality.