We modified the HomePage to use
the Next Image component.
And we also changed the user interface
to display the latest 3 reviews,
which makes this page nicer.
Now, I'd like to improve it a bit more
by displaying the subtitles as well.
Let me see if I can keep this window wide enough
so that it shows the titles
on the right of each image.
When we fetch the reviews from the CMS
we're already selecting the "subtitle" field,
but so far we're not actually using it anywhere.
Let's include it in the objects we
return to each page component.
This way it will be available in the HomePage.
We could display it after the title,
in a separate paragraph.
So let's render the "review.subtitle" here.
Let's see what it looks like.
It's showing it on the same line as the title,
which is not what we want.
Let's wrap both elements in a "div",
to group them together in the same flexbox child.
Ok, they're now on separate lines.
But we want to align that text differently.
We can move some of the h2 styles to the "div".
We had "px-2".
I'm not sure we actually need
to prefix it with "sm".
We could leave the horizontal padding
even on smaller screens.
Anyway, we then have "py-1" and "text-center",
but on larger screens we want the
text to be left-aligned instead.
And we can remove these classes from the "h2" now.
Let's see if this works.
That's better.
We may just want to add some padding
at the top of the paragraph.
So there's some spacing between
"title" and "subtitle".
Let's see what it looks like on a smaller screen.
The subtitles don't really fit well in this case.
Maybe we should hide them on smaller screens.
We can set this element to be "hidden" by default,
and then only if the screen is "small" or larger
we can display it as a "block",
which will make it visible.
You can see that,
on a small screen we no longer show the subtitles.
But if we enlarge this window,
when the titles move to the right
we show the subtitles as well.
So this is an example of responsive design
where we only display an element
on larger screens.
But keep it hidden on smaller screens
where there isn't much space.
Anyway, since we added the subtitle,
we should display it on each ReviewPage as well.
Let's quickly change the code for that page.
Here we could add a paragraph after the Heading,
and render the "subtitle" property
that we added to each review object.
We may want to style it a bit differently,
otherwise it's the same as the body text.
Let's use "font-semibold"
and add some padding at the bottom.
Ok, it looks more like a subtitle now.
Let's check another review as well.
We need to make sure the browser
doesn't use a cached version.
It is now showing the subtitle.
Ok, that's all I wanted to do in this video.
It was just to make our Home page nicer really,
but it's also another example
of responsive design,
this time selectively hiding or showing elements
depending on the screen size.