00:00:02 In this lesson, let's focus on implementing the UI of the authentication page, and then very quickly we'll fuse it with Google Auth,

00:00:11 this time by using BetterAuth, which is the auth provider that a lot of you have requested.

00:00:16 So head over to localhost 3000 forward slash sign dash in.

00:00:21 And that'll redirect you to the auth page.

00:00:24 Then we can open it up right here within our code.

00:00:27 So that is page.dsx within sign in.

00:00:30 This one right here.

00:00:31 And we can wrap it with a main tag and give it a class name equal to sign in.

00:00:38 This sign in page truly shines on desktop devices, but we can develop it mobile first.

00:00:44 So right here within this main, I will render an aside.

00:00:49 And give it a class name equal to testimonial.

00:00:53 So on the left side, we want to show a testimonial from a person that used the app before.

00:00:59 And if they click on it, maybe we can point to the homepage.

00:01:03 So I'll render a link with an href pointing to forward slash.

00:01:09 And I'll import that link and make it come from next link.

00:01:15 And within it, I can render an image with a source of assets, icons logo.svg with an alt tag of logo, a width of 32, and a height of 32 as well.

00:01:29 So now you should be able to see the logo after we fix the height spelling right here.

00:01:34 There we go.

00:01:35 It's right here at the bottom left.

00:01:37 Also, right below the image, we can render an h1 that renders the name of the application, snapcast.

00:01:44 Next, right below this link, we can render another div with a class name equal to description, and then we can render a section within which we'll have

00:01:55 a figure And here we can render five stars.

00:01:59 So I will render a new array from a length of five.

00:02:05 And then I will map that array.

00:02:09 When you want to map over something and you don't care about the value, but you need to access the second parameter, you can just put an underscore there

00:02:18 and then get the index, which is the second param.

00:02:20 And then for each one of these, we want to render an image with a source of assets.

00:02:26 icons star.svg with an alt tag of star, a width of 20, and a height of 20, and we also need to provide a key of index since we're mapping over it.

00:02:40 If you do this, you'll see five stars right here below.

00:02:43 Next, below this figure, we can render a p tag, and we can copy the text right here from our design.

00:02:50 So I'll copy this one, Snapcast makes screen recording easy.

00:02:55 There we go.

00:02:56 You can see it right here.

00:02:57 Below it, I'll render an article that'll contain an image that'll have a source of assets, images, json.png, with an alt tag of json,

00:03:10 a width of about 64, a height of 64 as well, and a class name of rounded.

00:03:20 So now you should be able to see his image and below, still within the article, we can render the div within which we can have an H2 that'll say Jason Rivera,

00:03:31 for example.

00:03:32 And then below it, we can render a P tag that'll say product designer.

00:03:37 at nova byte or you can choose any other random name or person or maybe find somebody real that reviewed your application.

00:03:44 Next, we can head below this section and below the div and here you can render a p tag that'll render the copyright sign and then you can say snap cast

00:03:55 and then you can form a new date which you can wrap to call the get year or get full year just so we don't have to update the actual year every year.

00:04:08 Perfect.

00:04:09 So now we can see it at the bottom left right here.

00:04:12 Now we can focus on the right side of the authentication or on mobile devices.

00:04:18 That's referring to the top part where you actually want to get users to log in.

00:04:23 So I will head below the aside and I will create another aside.

00:04:29 So this is the second side to this authentication page.

00:04:33 This one will have a class name equal to GoogleSignIn, and it'll render a section with a link in between.

00:04:45 And this link will have an href pointing to the homepage.

00:04:50 And it'll render the same logo that we rendered above.

00:04:53 So I'll just copy this image rendering the logo and paste it right here within this link.

00:04:59 But this time it'll be a bit larger.

00:05:02 We can do about 40 and 40 here as well.

00:05:06 So you can see it now at the top.

00:05:07 This will be for the form.

00:05:09 And we can render an H1 that'll say snap cast.

00:05:13 Perfect.

00:05:14 Now right below that link, we can create a P tag.

00:05:19 And we can say something like, create and share your very first, and then within a span, snap cast video, and then outside of span in no time.

00:05:33 I just copied this over from the design.

00:05:36 So now this is within our primary color.

00:05:38 Create and share your very first snap cast video in no time.

00:05:42 Perfect.

00:05:44 And then right below it, below the P tag, we can render a button that'll render an image of assets, icons, google.svg.

00:05:57 with an alt tag of Google, a width of 22, a height of 22. And after the image, we can render a span that says sign in with Google.

00:06:11 There we go.

00:06:12 So now we have the full UI of the authentication and we can head over below this aside and we can render a div, self-closing one with a class name of overlay.

00:06:26 So now if you save it and check it out on desktop, it looks great.

00:06:30 On the left side, we have a testimonial because typically there's not a lot of stuff that you can put on the authentication page.

00:06:36 So you can either center the actual form or you can give users the additional information that you want them to see before they actually sign in.

00:06:44 And with that in mind, the UI part of the authentication page is now done and we can focus on hooking it up with the authentication logic.

00:06:53 So let's do that in the next lesson.