1
00:00:00,330 --> 00:00:00,870
Nice work.

2
00:00:01,000 --> 00:00:06,810
And once we've got our page here in place next hour, we want to work on services.

3
00:00:07,020 --> 00:00:11,790
So they feature products for now because I would want to fetch them first.

4
00:00:12,300 --> 00:00:19,770
And the way we're going to do that is by going, of course, to the services component.

5
00:00:19,890 --> 00:00:21,240
That's the one we're looking for.

6
00:00:21,690 --> 00:00:24,560
And yep, I have services.

7
00:00:25,320 --> 00:00:26,430
That's why it is displayed.

8
00:00:26,790 --> 00:00:33,030
But of course, I would want to set up my styled component, which is going to be a wrapper, and this

9
00:00:33,030 --> 00:00:34,620
is going to be the case where technically.

10
00:00:35,550 --> 00:00:41,310
If you want, you can hard code these values and tell you honestly, there's nothing that stopping you

11
00:00:41,310 --> 00:00:44,620
from doing that because we won't use those services in different places.

12
00:00:45,050 --> 00:00:50,700
It's not like with links where it definitely makes sense to set them up in a separate place and then

13
00:00:50,700 --> 00:00:51,890
just iterate over.

14
00:00:52,380 --> 00:01:00,570
But I still prefer setting up some kind of array in a separate file, and that way I can separate two

15
00:01:00,570 --> 00:01:01,200
concerns.

16
00:01:01,210 --> 00:01:07,440
I have data in one place, which is going to be the icon, the title, as well as the text and then

17
00:01:07,500 --> 00:01:08,370
in the services.

18
00:01:08,580 --> 00:01:11,300
I only worry about our rendering.

19
00:01:11,790 --> 00:01:17,370
And in order to check out the services, essentially, all right, we will need to navigate to utils

20
00:01:17,880 --> 00:01:18,920
and then constant.

21
00:01:19,260 --> 00:01:20,490
That's where we have our links.

22
00:01:20,490 --> 00:01:20,880
Correct.

23
00:01:21,330 --> 00:01:26,430
And we're going to do that by going, of course, to the hotels and to the constants.

24
00:01:26,610 --> 00:01:30,950
And in here, yep, we have the links, but we also have services.

25
00:01:31,260 --> 00:01:36,860
Now, what's different about services that I imported, these icons are right here.

26
00:01:37,710 --> 00:01:42,000
So I import them from react icons, whichever icons you like.

27
00:01:42,300 --> 00:01:49,140
And then when I'm setting up that service, still the object I have property by the name of Icon, which

28
00:01:49,140 --> 00:01:54,030
I set it equal to my component to the Iraqi component, which is an icon.

29
00:01:54,390 --> 00:01:55,920
And the notice, again, we have a list.

30
00:01:55,920 --> 00:01:59,840
So we are ready, we have title and then we have the text as well.

31
00:02:00,240 --> 00:02:06,680
No one gottsch about this one you must import react in this case since you have the react component.

32
00:02:07,170 --> 00:02:11,040
When we worked with Lynch, we didn't need react.

33
00:02:11,290 --> 00:02:13,080
This is just simple JavaScript data.

34
00:02:13,440 --> 00:02:21,390
Now when we are setting up this type of structure where one of the properties is area component, you

35
00:02:21,390 --> 00:02:22,710
must import Riak.

36
00:02:23,310 --> 00:02:29,280
That's one of the gotchas that you need to know if you're setting up your data this way.

37
00:02:29,520 --> 00:02:36,750
And once we're familiar with how our data is structured, which I navigate back, are important since

38
00:02:36,750 --> 00:02:41,400
it is a named export and then I would want to set up my return.

39
00:02:42,630 --> 00:02:49,710
Where instead of my rapper, I'm going to go with the off with a class of S. center again just for the

40
00:02:49,710 --> 00:02:53,580
West, and then we're going to have two articles.

41
00:02:54,030 --> 00:02:58,250
One is going to be or, you know, it's going to be one article and one they're my apologies.

42
00:02:58,680 --> 00:03:00,150
So we're going to go over here.

43
00:03:00,160 --> 00:03:08,520
We're going to say that there was this article and class is better and that inside of this article,

44
00:03:08,550 --> 00:03:11,880
we're going to go with Harring three and we'll say custom.

45
00:03:15,770 --> 00:03:22,280
Hopefully misspellings, correct, then I'll set up another line break just because I enjoy line break

46
00:03:22,970 --> 00:03:26,900
elements built only for you.

47
00:03:27,440 --> 00:03:29,330
Let's see what we've got.

48
00:03:29,540 --> 00:03:29,950
All right.

49
00:03:29,960 --> 00:03:33,130
There is that is our having three then right next to it.

50
00:03:33,140 --> 00:03:34,520
I'm going to go with my paragraph.

51
00:03:34,520 --> 00:03:38,780
In this case, I'm going to go with 20 words thing that you do it.

52
00:03:39,320 --> 00:03:44,390
And then, like I said right next to it, I would want to have Div with a class name.

53
00:03:44,390 --> 00:03:45,410
So I have one article.

54
00:03:45,530 --> 00:03:50,740
Don't place it inside of the article, but we're going to go with Services and Center.

55
00:03:50,870 --> 00:03:53,810
So this is Section Center and this is Ceressus Center.

56
00:03:54,020 --> 00:03:59,060
And of course you can already guess that services center will be styled over here.

57
00:03:59,430 --> 00:04:01,740
So the section center warns that global one.

58
00:04:02,030 --> 00:04:08,630
Now I lost my suggestion and if that happens to you, remember that the shortcut is control and space,

59
00:04:08,630 --> 00:04:14,870
at least in my book, where I can get my suggestion back and now I have my def and the only thing I

60
00:04:14,870 --> 00:04:18,200
need to do is just iterate over services, something we have done.

61
00:04:19,020 --> 00:04:24,410
I want to say a thousand times, not, of course, but I think maybe even more so, we're going to go

62
00:04:24,420 --> 00:04:25,680
here with single service.

63
00:04:25,890 --> 00:04:27,660
Now, I'm referencing that object.

64
00:04:27,900 --> 00:04:29,310
What properties do I want?

65
00:04:29,490 --> 00:04:30,450
Well, I want that.

66
00:04:31,050 --> 00:04:31,950
I want icon.

67
00:04:32,100 --> 00:04:34,110
I want title and I want tax.

68
00:04:34,170 --> 00:04:34,560
Correct.

69
00:04:34,570 --> 00:04:37,200
And that is all coming from Cerveris.

70
00:04:37,200 --> 00:04:38,250
You guessed it correctly.

71
00:04:38,640 --> 00:04:46,860
And as far as the return we go with Artecoll over here and right away a key and I want to add a little

72
00:04:46,860 --> 00:04:47,520
bit of styling.

73
00:04:47,520 --> 00:04:51,840
So add class name of service service over here.

74
00:04:52,290 --> 00:04:54,900
And then instead of this article, let's go with spane.

75
00:04:55,820 --> 00:05:01,850
And this one will also have the class name, the class name will be Icon, scroll down just so we can

76
00:05:01,850 --> 00:05:02,810
see a bit clearer.

77
00:05:03,260 --> 00:05:08,980
And inside of the span, we're going to go with Icon like so I'll say it.

78
00:05:09,020 --> 00:05:10,850
I should see my icons.

79
00:05:10,850 --> 00:05:11,390
There it is.

80
00:05:11,780 --> 00:05:14,600
And then I just need to have the title and the text.

81
00:05:15,140 --> 00:05:15,800
So here.

82
00:05:16,750 --> 00:05:23,080
Let's run the title and also let's are under this paragraph, and I'm going to be looking for the text,

83
00:05:23,560 --> 00:05:25,540
so surrender all of them.

84
00:05:26,650 --> 00:05:30,370
We have our services to navigate to the big screen.

85
00:05:30,760 --> 00:05:33,240
The moment we have the hero, we have featured products.

86
00:05:33,490 --> 00:05:36,550
And there is now we have these services.

87
00:05:36,850 --> 00:05:38,800
Now, don't worry about this current look.

88
00:05:39,140 --> 00:05:40,030
Don't freak out.

89
00:05:40,600 --> 00:05:48,790
It's done on purpose because notice here, when I have the newsletter, I would want to have those services

90
00:05:49,090 --> 00:05:52,360
kind of going into that particular section.

91
00:05:52,600 --> 00:05:59,890
So once I get to certain screen size, I just increase the padding on newsletter and make sure that

92
00:05:59,890 --> 00:06:02,790
my whole services section moves down a little bit.

93
00:06:03,100 --> 00:06:08,530
Then just to see a system that has nothing to do with our functionality.