All right.
Next hour, I want to focus on the Amber Alert page, as well as the checkout page for both of them
who have the same initials set up.
And what's interesting about these pages, we'll also build on this page hero, where we have the page
above the content of the page, which is going to display some kind of depth with a little bit of styling
and says, well, what is the page that we're currently on?
And also we have a link to navigate back to the homepage and both the about as well as the checkout.
We'll use the same initial setup and we'll also add this page here eventually through the product,
through the card and rest of the pages, apart from the homepage, that one will have different set
up.
So now let's start by navigating to about page notice, reporting the page here.
So eventually we'll set it up and this video.
But we'll start with just displaying the main.
So this is going to be the case where wrapper will be used a little bit later.
So I just say simple return.
So I'm returning the main and I'll start by displaying the page hero, something that we'll work on
in a second.
So Page and then Hero on notice how I'm reporting as named import from the components, because remember
we have the indexed order where we import all the files and then export names exports and only then
we'll have the wrapper.
So now I would want to place my wrapper so my style component and then inside of it there is going to
be two column layout.
Now, of course, as far as the column mounts, everything is already set up here in the CSIS and my
staff component.
But I do want to add three global classes.
So we're going to go here with class name page.
That is just going to make sure that, again, we take up most of the space apart from the page here
on our and lot.
So something similar like we did in the error.
Only in this case.
This is a little bit different.
Again, if you want to take a look and says, please do so.
And then I have one class, the section class that just adds a little bit of padding top and bottom
and section center that adjust.
Make sure that we always have the same with again, if you're interested in those class names, those
are global classes and you can check them out in the index success.
And then I'm going to have to come out and the first one will be image.
And notice how again, I have the image imported from the assets.
Now, I cheated a little bit.
I use the same image that we're going to use in the homepage, the hero picture and the path is following.
Again, we take a look at the assets.
We look more specifically for Hero hyphen BTG and then full extension dot jpeg file.
And then give it some kind of name in this case, it's going to be about image and we're just going
to say about HMG, as far as the alternative will say, nice and dusk.
So that's going to be the first column.
And the second one will be article.
And by the way, you know what?
In here, I think we can navigate to about Page so we can see something.
And of course, I haven't saved it.
So now or need to save it.
My heart reloading is working.
I have page zero.
Don't worry about this gap over here.
Once we set up the page here, it's going to disappear.
And then right next to the image, I'm going to go with my second column again.
The Commonwealth will kick in on a bigger screen for the time being.
There's only one column left and here I would want to have a title now for a title.
Again, it's going to be a global class.
So we're going to go with Clash of Title on Dev Van, heading to some kind of text.
I'll say our story and then right next to the heading to we'll go with on the line which so so that's
going to be on our line.
In a trial and then right after a day of let's go with paragraph and some kind of text, 30 words,
20 words, whatever you want.
So I, I'm going to go with 30 or seven and there is my paragraph.
So now, of course, we would just need to set up that page.
So let's navigate back to our components and we're looking for the page hero component.
And this component eventually will take it to perhaps, but for the time being, it will just take one.
And that is going to be the title.
So essentially the title is going to be the current page, because this is going to be the link that
always points back to the home page.
But as we're navigating two different pages, notice how this is changing.
So this will just let the user know what what is the current page?
That's why I'll write a way pass in and I'll say that, of course, it's going to be about four different
pages.
Of course, the value will be different.
So we have the page here.
The moment, of course, we're not handling the title.
That's why we cannot see anything.
And of course, now I will navigate back to my components and I'm looking for page zero.
And I'll structure right away my prop, so central and and here I have the wrapper, so I have styled
component.
And as far as the return, well we'll go with d'Hiv and add again section Sinterklaas that just make
sure that we always have the same with whether that is the section or page or whatever.
And then inside of it we're going to go with heading three.
And first I would want to place that homelike and then eventually I'll place my title.
So the way it's going to look, we're going to go with a link to and then forward slash and we'll place
a link here.
That's right.
That should be our page here.
And now I would want to display that title, which is going to change as we navigate from page to page.
So right after the link, let's go here we have a fourth and say that we would want to display the title,
which, of course, in this case is going to be about.
So now once we click on Home Mervis, we navigate back home.
And if we go to about, we have home and then for about an while, we're still in the road.
Think we can do the same thing in the check out page, so let's navigate to the pages directory.
And it is right here somewhere.
Check out Page again, I have the page here and I'm not going to look for any kind of props.
Again, I will use the main and inside of this main, we're just going to go with a page hero and say
title is going to be in this case, check out.
Of course, we can close the component and we'll use my wrapper, which at the moment doesn't have any
styling of class name and by the way, allowed here class name of page.
So essentially it takes up the rest of the screen.
So I'm a wrapper.
I add my global class.
And now once we navigate through a check out page, we also should see the home on the checkout.
And at the moment it's not taking up the whole page.
And maybe be the reason for that is because I don't have class name, let's say, once we have that.
Yep, there it is.
Now, of course, we'll display our checkout.
So in here, let's just add maybe having one.
Where it will say check out, yeah, and there is now, of course, we can save it and we have some
kind of value in the content as well, that should do it for about Check-Out.
Now, we can start working on the home page where we have the main hero and we'll skip the featured
product because we need to set up the functionality where we actually fetch them in the product context
moussab services and we'll set up the newsletter.
So all the easy peasy ones first and then we'll start tackling the big beast, the product.