1
00:00:03,000 --> 00:00:05,751
We added an image to each review page.

2
00:00:05,751 --> 00:00:07,976
Now let's do the same for the

3
00:00:07,976 --> 00:00:10,200
page listing all the reviews.

4
00:00:10,277 --> 00:00:13,226
Let me go and open the right file in the editor.

5
00:00:13,226 --> 00:00:17,184
In this page we could show a card for each review,

6
00:00:17,184 --> 00:00:20,216
with an image and the game title.

7
00:00:20,216 --> 00:00:22,467
So let's copy the image element

8
00:00:22,467 --> 00:00:23,847
from a review page,

9
00:00:23,919 --> 00:00:25,952
since it will be very similar.

10
00:00:26,039 --> 00:00:29,248
Here we can display the image inside the Link,

11
00:00:29,248 --> 00:00:30,922
so it will be clickable.

12
00:00:30,992 --> 00:00:35,676
But let's make it smaller, like 320 by 180,

13
00:00:35,676 --> 00:00:39,201
because we'll have several images on this page.

14
00:00:39,201 --> 00:00:40,320
That looks good.

15
00:00:40,320 --> 00:00:42,889
Let's do the same for the first item.

16
00:00:43,640 --> 00:00:45,901
This one is "hollow-knight",

17
00:00:46,580 --> 00:00:48,953
so we need to load the right image.

18
00:00:49,080 --> 00:00:50,231
That's fine.

19
00:00:50,400 --> 00:00:53,981
I'll put the Developer Tools on one side for now,

20
00:00:53,981 --> 00:00:56,897
to be able to see the full page in the browser.

21
00:00:56,897 --> 00:00:59,989
Now, let's style each item as a card.

22
00:00:59,989 --> 00:01:02,827
First of all, let's set the list element

23
00:01:03,389 --> 00:01:07,313
to use flexbox, displaying the items in a column,

24
00:01:07,313 --> 00:01:09,217
and with a gap between them.

25
00:01:09,553 --> 00:01:11,709
This will make sure there's some

26
00:01:11,709 --> 00:01:13,326
space between each item.

27
00:01:13,393 --> 00:01:15,917
Now, let's style each item, starting

28
00:01:15,917 --> 00:01:17,249
from the first one.

29
00:01:17,319 --> 00:01:19,567
We want it to have a border.

30
00:01:19,639 --> 00:01:22,132
It's not that easy to see, but there

31
00:01:22,132 --> 00:01:24,208
is a thin gray line around it.

32
00:01:24,278 --> 00:01:26,385
We'll want the item to be the

33
00:01:26,385 --> 00:01:28,130
same width as the image,

34
00:01:28,202 --> 00:01:31,462
so I'll use "w-80", that just

35
00:01:31,462 --> 00:01:33,823
happens to be "320px"

36
00:01:33,936 --> 00:01:35,957
which is exactly the same width

37
00:01:35,957 --> 00:01:37,262
we set on the image.

38
00:01:37,327 --> 00:01:41,292
Ok, the border is now aligned with the image.

39
00:01:41,292 --> 00:01:43,839
It's still not very visible though;

40
00:01:43,839 --> 00:01:47,238
let's try setting the background to "white".

41
00:01:47,238 --> 00:01:50,246
This way the card stands out a bit more.

42
00:01:50,246 --> 00:01:53,443
Now, we should center the card title.

43
00:01:53,443 --> 00:01:56,540
Let me wrap the text in an "h2" heading,

44
00:01:56,540 --> 00:01:59,269
so we can then add some styles to it.

45
00:01:59,400 --> 00:02:01,509
We can use "text-center".

46
00:02:01,940 --> 00:02:04,048
That's good, but we need some

47
00:02:04,048 --> 00:02:05,866
vertical padding as well.

48
00:02:05,938 --> 00:02:08,086
We can remove the margin below

49
00:02:08,086 --> 00:02:09,804
the image at this point.

50
00:02:09,875 --> 00:02:12,633
Ok, the title looks about right.

51
00:02:12,633 --> 00:02:16,051
Now, we could make the card rounded as well.

52
00:02:16,113 --> 00:02:18,509
That's nicer, but the image

53
00:02:18,509 --> 00:02:20,816
corners don't quite match.

54
00:02:20,905 --> 00:02:23,120
Since it's now part of the card,

55
00:02:23,120 --> 00:02:26,486
the image shouldn't be rounded at the bottom.

56
00:02:26,486 --> 00:02:29,710
We can change the image to use "rounded-t",

57
00:02:29,710 --> 00:02:32,869
that will only apply the rounding to the top.

58
00:02:32,869 --> 00:02:36,328
Ok. As a final touch, let's add a "shadow",

59
00:02:36,328 --> 00:02:39,016
which will give the impression that

60
00:02:39,016 --> 00:02:41,167
the card is slightly raised.

61
00:02:41,244 --> 00:02:44,291
We may also want to give some visual feedback

62
00:02:44,291 --> 00:02:47,619
when the user moves the mouse over the card,

63
00:02:47,619 --> 00:02:50,758
to show that that item is selected.

64
00:02:50,758 --> 00:02:53,404
Let's use the "hover:" modifier,

65
00:02:53,404 --> 00:02:56,227
and set the "shadow" to "extra-large"

66
00:02:56,227 --> 00:02:57,371
for this state.

67
00:02:57,448 --> 00:03:00,038
This way, if we move the mouse over,

68
00:03:00,038 --> 00:03:02,544
you can see that the item appears

69
00:03:02,544 --> 00:03:04,442
to be lifted up slightly.

70
00:03:04,518 --> 00:03:08,089
Ok, I think this card looks decent now.

71
00:03:08,089 --> 00:03:11,367
Let's apply the same styles to the other item.

72
00:03:11,367 --> 00:03:13,249
It's probably quicker if I

73
00:03:13,249 --> 00:03:15,131
overwrite the whole thing,

74
00:03:15,203 --> 00:03:17,498
and then replace "hollow-knight"

75
00:03:17,703 --> 00:03:20,261
with "stardew-valley" everywhere,

76
00:03:20,343 --> 00:03:22,787
including in the title text.

77
00:03:23,843 --> 00:03:28,310
Ok, the Reviews page now shows two nice cards,

78
00:03:28,310 --> 00:03:30,652
and it will highlight the selected

79
00:03:30,652 --> 00:03:32,581
item with a bit of a shadow.

80
00:03:32,650 --> 00:03:35,066
At some point we'll use the same

81
00:03:35,066 --> 00:03:36,802
code for all the items,

82
00:03:36,877 --> 00:03:39,109
without duplicating the styles,

83
00:03:39,109 --> 00:03:41,222
but this works fine for now.

84
00:03:41,222 --> 00:03:43,081
I should also mention that

85
00:03:43,081 --> 00:03:45,339
so far we didn't really think

86
00:03:45,339 --> 00:03:47,286
about image optimization.

87
00:03:47,364 --> 00:03:49,420
If we use the Developer Tools

88
00:03:49,420 --> 00:03:51,821
and inspect one of these images,

89
00:03:52,180 --> 00:03:56,743
you can see that it's rendered as 320x180

90
00:03:56,743 --> 00:03:59,522
(minus 1 pixel for the border)

91
00:03:59,522 --> 00:04:04,021
but the original image is 1280x720.

92
00:04:04,021 --> 00:04:07,419
So, this image file is too large.

93
00:04:07,419 --> 00:04:10,747
Ideally we should resize each image to match

94
00:04:10,747 --> 00:04:13,395
the dimensions we use in each page.

95
00:04:13,470 --> 00:04:15,414
We could keep different files

96
00:04:15,414 --> 00:04:16,956
in our "public" folder,

97
00:04:17,023 --> 00:04:20,966
with smaller and larger images for each game.

98
00:04:20,966 --> 00:04:22,700
But we're not actually going

99
00:04:22,700 --> 00:04:24,435
to worry about this for now,

100
00:04:24,497 --> 00:04:27,732
because later on we'll see how Next.js

101
00:04:27,732 --> 00:04:30,967
can automatically optimize our images.

102
00:04:31,052 --> 00:04:34,269
That feature however is not compatible

103
00:04:34,269 --> 00:04:36,978
with doing a static HTML export,

104
00:04:37,063 --> 00:04:39,567
so we'll cover it in a later section,

105
00:04:39,567 --> 00:04:42,335
when we get to features that require

106
00:04:42,335 --> 00:04:44,257
running a Node.js server.