00:00:02 To start developing our homepage, we first have to see how it looks like on the finished design.

00:00:07 We have this nice looking dashboard, and the thing that we instantly see right here are these three differently colored cards.

00:00:14 And what instantly stands out are these three differently colored action cards.

00:00:19 So let's create those first and position them on the page.

00:00:22 I'll create a new component for each one of these, and I'll call it companion card.

00:00:29 Let's start by running RAFCE right within it.

00:00:32 And we can head over into our homepage by heading over into app-page.tsx.

00:00:39 And we can have an H1 right here that says popular.tsx.

00:00:44 companions, and then we can create a new section that'll have a class name equal to home section.

00:00:52 And within it, we'll create a new companion card.

00:00:55 One, two, three.

00:00:58 And I'll turn this main div into a main tag because this is our main content of the page.

00:01:03 So now we can see three different companion cards.

00:01:06 Now on top of these companion cards, we also have a second part of the home section, which are these recently completed section.

00:01:13 So this is a companions list, as well as this call to action to build a new companion.

00:01:19 So let's add those two.

00:01:21 I'll do it right here within the components folder by creating a new file called companions list.

00:01:32 I'll run RAFCE and we want to do the same thing for the CTA call to action.

00:01:38 So I'll call it cta.tsx and I'll run RAFCE.

00:01:44 And now we can just import it over here within the homepage in a section below the section with the three cards.

00:01:51 So I'll create another section that'll have a class name equal to home section.

00:02:00 And here, we can render the Companions list, and right below it, we want to render the CTA, the Call to Action.

00:02:07 So now everything looks all jumbled up right here, but very soon as we start implementing the styles for these inner components,

00:02:14 it'll all start making sense.

00:02:16 If you expand it to Desktop view though, you'll see that the main view already started to resemble the Figma design.

00:02:22 We have three companion cards at the top, the companion list to the left, and the call to action at the right.

00:02:28 So let's figure out which different props do we need to pass to each one of these companion cards.

00:02:34 How can we know that?

00:02:35 Well, we can take a look at different data points that it has.

00:02:39 For example, we can see that it has some kind of a topic like science or a subject maybe.

00:02:46 Then it has a name or the title.

00:02:49 It has the topic, it has the duration, and finally the color of the card.

00:02:55 So these are different props that are different from card to card, whereas their layout is the same.

00:03:02 So we can technically already know what we need to pass.

00:03:06 So for the first one, let's give it some kind of an ID.

00:03:10 I'll make it a string in this case, 123. Let's give it a name, and we can basically copy what we have here on the design.

00:03:17 So this is going to be Neura, the brainy explorer.

00:03:21 Next, we can have the topic, which will be equal to, in this case, we can copy what it says right here, neural network of the brain,

00:03:30 and we can have a subject.

00:03:32 In this case, it is science.

00:03:35 And also iteration.

00:03:36 In this case, we can make it about 45 minutes.

00:03:39 Same what it says on the design.

00:03:41 That can be a number.

00:03:43 And we can pass a color.

00:03:45 You can do anything really.

00:03:46 I'll just pass a random hexadecimal code.

00:03:49 Perfect.

00:03:49 And now that we have this card, we can basically duplicate it two more times.

00:03:54 One, two.

00:03:56 And we can change the ID.

00:03:58 In this case, I'll do something like 456. And you can copy the contents of the next card from the design.

00:04:05 I'll call it Count C the number wizard.

00:04:07 The topic can be something like derivatives and integrals.

00:04:11 Let's say you want to learn about that or you don't know how to teach your kids that and you want the AI to teach them.

00:04:16 I think we're going to reach those times pretty soon in the future.

00:04:20 We can pass the duration and maybe another hexadecimal color like E5D0FF.

00:04:28 And for the last card, we can pass 789 as the ID.

00:04:33 And we can copy the rest of the stuff from the design.

00:04:36 Verba, the vocabulary builder.

00:04:40 We have the topic next, which is going to be in this case, language learning.

00:04:44 So I'll say language.

00:04:45 We have the subject, which is going to be English literature.

00:04:48 So let me copy that from here.

00:04:50 And we have a duration of about 30 minutes, as well as some kind of a color, such as BDE.

00:04:56 7FF.

00:04:58 So if we save it and go back, nothing will really change, right?

00:05:03 And you know why.

00:05:04 It's because we haven't yet modified the actual companion card itself.

00:05:08 We have just passed the props into it.

00:05:11 So within this companion card, we can now accept the props that we're passing, such as an ID, name, topic, subject.

00:05:20 duration, and color, and we can define those as a type of companion, card, props.

00:05:29 This is a TypeScript interface that we can create right above so that we always know exactly what this component has to accept.

00:05:37 So you can say interface, companion, card, props, and you can declare that it needs an ID of a type string.

00:05:46 a name of a type string as well, a topic of a type string, a subject of a type string, a duration of a type number, and a color of a type string.

00:05:58 And now it's not going to complain because it knows that it's getting everything that it needs.

00:06:03 But if you pass something different into it, such as a test of a type test, you'll immediately see that it says, hey, this isn't going to work.

00:06:11 Property test does not exist on this companion card props type.

00:06:16 Perfect.

00:06:17 So now that we know which props do we need and we know that we're actually accepting them, we can create the UI of the card.

00:06:24 I'll wrap it in an article tag, which simply means a div that contains something together.

00:06:30 I'll give it a class name equal to companion-card.

00:06:35 And since we have to keep the background color dynamic, I'll pass an inline style of background color set to the color that we're passing through props.

00:06:45 Next, if I save this, you'll now be able to see three differently colored divs.

00:06:50 And now the only thing we have to do is render the contents.

00:06:54 So I'll pass in the div with a class name equal to flex justify between and items-center.

00:07:04 So we center it nicely.

00:07:06 Next, I'll render a div that'll have a class name of subject dash badge, and it'll simply render the subject.

00:07:16 If you do it, you should be able to see three different subjects.

00:07:20 I think for the second card, I forgot to change the subject over to maths.

00:07:24 So I'll copy it and I'll paste it right here.

00:07:29 There we go, that's good.

00:07:31 Next, still within the same outer div, but below the subject div, I'll render a button.

00:07:38 This doesn't have to be a Shadzian button.

00:07:40 We'll just give it a class name of companion Bookmark.

00:07:45 And I'll make it render an image that'll have a source of icons, bookmark.svg with an alt tag of bookmark, a width of about 12.5 and a height of 15. Perfect.

00:08:03 So now we can also bookmark this lesson.

00:08:06 I'll head below the button and below the div, and I'll render an H2 that'll render the name of this tutor with a class name of text-to-excel font-bold,

00:08:20 just so we can make it stand out.

00:08:22 Below the H2, I'll render the p tag that will render a class name of text-sm.

00:08:30 And here we can just render the topic.

00:08:32 Below it, I'll render another div with a class name equal to.

00:08:39 Flex, items-center, a gap of two, and within it, we can display an image with a source of icons, forward slash clock.svg,

00:08:51 with an alt tag of duration.

00:08:54 a width of about 13.5, and a height of 13.5 as well.

00:09:00 So now you can see this little clock icon.

00:09:03 And then below it, we can render a P that has a class name of text-sm.

00:09:09 That'll simply render duration, and then min's duration, just so we know how long it lasts.

00:09:16 30 minutes.

00:09:18 Or you can just say duration minutes like this.

00:09:23 Finally, below this div, I'll render a link component with an href pointing to forward slash companions, forward slash id.

00:09:32 And this is actually pointing to our route that we created, the dynamic route to that specific lesson details.

00:09:39 I'll give it a class name of WFool.

00:09:43 And let's not self-close it.

00:09:45 Instead, within this link, I'll render a button that'll say Launch Lesson.

00:09:51 And we can style it a bit by giving it a class name of btn-primary-w-full and justify-center.

00:10:01 So we center it really nicely on the screen.

00:10:03 And with that, we got these three amazing looking, popular, Companions cards.

00:10:09 And of course, it is fully mobile responsive, but we were developing mobile first, so I could technically say that it is desktop responsive as it looks

00:10:18 great on the full screen.

00:10:19 In the next lesson, let's continue with the rest of the homepage UI.