1
00:00:03,000 --> 00:00:05,394
We modified the HomePage to use

2
00:00:05,394 --> 00:00:07,326
the Next Image component.

3
00:00:07,403 --> 00:00:10,026
And we also changed the user interface

4
00:00:10,026 --> 00:00:12,234
to display the latest 3 reviews,

5
00:00:12,303 --> 00:00:14,306
which makes this page nicer.

6
00:00:14,306 --> 00:00:17,129
Now, I'd like to improve it a bit more

7
00:00:17,129 --> 00:00:19,804
by displaying the subtitles as well.

8
00:00:19,878 --> 00:00:22,924
Let me see if I can keep this window wide enough

9
00:00:22,924 --> 00:00:24,793
so that it shows the titles

10
00:00:24,793 --> 00:00:26,662
on the right of each image.

11
00:00:26,731 --> 00:00:29,354
When we fetch the reviews from the CMS

12
00:00:29,451 --> 00:00:32,841
we're already selecting the "subtitle" field,

13
00:00:32,841 --> 00:00:35,855
but so far we're not actually using it anywhere.

14
00:00:35,855 --> 00:00:38,153
Let's include it in the objects we

15
00:00:38,153 --> 00:00:40,181
return to each page component.

16
00:00:40,249 --> 00:00:43,504
This way it will be available in the HomePage.

17
00:00:43,504 --> 00:00:45,924
We could display it after the title,

18
00:00:45,924 --> 00:00:47,568
in a separate paragraph.

19
00:00:47,766 --> 00:00:50,935
So let's render the "review.subtitle" here.

20
00:00:50,935 --> 00:00:52,671
Let's see what it looks like.

21
00:00:52,671 --> 00:00:55,708
It's showing it on the same line as the title,

22
00:00:55,708 --> 00:00:57,370
which is not what we want.

23
00:00:57,370 --> 00:00:59,789
Let's wrap both elements in a "div",

24
00:00:59,789 --> 00:01:03,422
to group them together in the same flexbox child.

25
00:01:03,971 --> 00:01:06,540
Ok, they're now on separate lines.

26
00:01:06,540 --> 00:01:09,771
But we want to align that text differently.

27
00:01:09,771 --> 00:01:13,213
We can move some of the h2 styles to the "div".

28
00:01:13,213 --> 00:01:15,124
We had "px-2".

29
00:01:15,124 --> 00:01:17,328
I'm not sure we actually need

30
00:01:17,328 --> 00:01:19,077
to prefix it with "sm".

31
00:01:19,153 --> 00:01:21,717
We could leave the horizontal padding

32
00:01:21,717 --> 00:01:23,380
even on smaller screens.

33
00:01:23,449 --> 00:01:27,744
Anyway, we then have "py-1" and "text-center",

34
00:01:27,744 --> 00:01:30,373
but on larger screens we want the

35
00:01:30,373 --> 00:01:32,921
text to be left-aligned instead.

36
00:01:33,001 --> 00:01:36,703
And we can remove these classes from the "h2" now.

37
00:01:36,703 --> 00:01:38,257
Let's see if this works.

38
00:01:38,257 --> 00:01:39,335
That's better.

39
00:01:39,335 --> 00:01:41,620
We may just want to add some padding

40
00:01:41,738 --> 00:01:43,459
at the top of the paragraph.

41
00:01:43,598 --> 00:01:45,814
So there's some spacing between

42
00:01:45,814 --> 00:01:47,458
"title" and "subtitle".

43
00:01:47,529 --> 00:01:50,491
Let's see what it looks like on a smaller screen.

44
00:01:50,829 --> 00:01:54,778
The subtitles don't really fit well in this case.

45
00:01:54,778 --> 00:01:57,999
Maybe we should hide them on smaller screens.

46
00:01:57,999 --> 00:02:01,305
We can set this element to be "hidden" by default,

47
00:02:01,305 --> 00:02:04,974
and then only if the screen is "small" or larger

48
00:02:04,974 --> 00:02:06,919
we can display it as a "block",

49
00:02:06,919 --> 00:02:08,626
which will make it visible.

50
00:02:08,626 --> 00:02:09,654
You can see that,

51
00:02:09,654 --> 00:02:13,079
on a small screen we no longer show the subtitles.

52
00:02:13,079 --> 00:02:15,471
But if we enlarge this window,

53
00:02:15,471 --> 00:02:17,785
when the titles move to the right

54
00:02:17,785 --> 00:02:20,205
we show the subtitles as well.

55
00:02:20,205 --> 00:02:23,632
So this is an example of responsive design

56
00:02:23,632 --> 00:02:25,934
where we only display an element

57
00:02:25,934 --> 00:02:27,229
on larger screens.

58
00:02:27,301 --> 00:02:30,087
But keep it hidden on smaller screens

59
00:02:30,087 --> 00:02:32,258
where there isn't much space.

60
00:02:32,309 --> 00:02:35,120
Anyway, since we added the subtitle,

61
00:02:35,120 --> 00:02:38,396
we should display it on each ReviewPage as well.

62
00:02:38,396 --> 00:02:41,454
Let's quickly change the code for that page.

63
00:02:41,454 --> 00:02:44,605
Here we could add a paragraph after the Heading,

64
00:02:44,605 --> 00:02:47,017
and render the "subtitle" property

65
00:02:47,017 --> 00:02:49,551
that we added to each review object.

66
00:02:49,551 --> 00:02:52,371
We may want to style it a bit differently,

67
00:02:52,371 --> 00:02:55,475
otherwise it's the same as the body text.

68
00:02:55,475 --> 00:02:57,672
Let's use "font-semibold"

69
00:02:57,982 --> 00:03:00,261
and add some padding at the bottom.

70
00:03:00,493 --> 00:03:03,759
Ok, it looks more like a subtitle now.

71
00:03:03,759 --> 00:03:06,095
Let's check another review as well.

72
00:03:06,419 --> 00:03:08,439
We need to make sure the browser

73
00:03:08,439 --> 00:03:10,270
doesn't use a cached version.

74
00:03:10,333 --> 00:03:12,884
It is now showing the subtitle.

75
00:03:12,884 --> 00:03:16,102
Ok, that's all I wanted to do in this video.

76
00:03:16,102 --> 00:03:19,245
It was just to make our Home page nicer really,

77
00:03:19,245 --> 00:03:21,336
but it's also another example

78
00:03:21,336 --> 00:03:22,850
of responsive design,

79
00:03:22,922 --> 00:03:26,683
this time selectively hiding or showing elements

80
00:03:26,683 --> 00:03:28,535
depending on the screen size.