00:00 All right, so I'm going to delete the placeholder paragraph. So we have a completely empty page, and we'll start by adding the logo. So there is an existing asset for that. So at the top of the file, I can import the named export EpicStackLogo from logos slash logos.

00:15 And so this is a component that contains the logo SVG. So we can render it here, EpicStackLogo. And right now it's really big, which is why there's the suggestion to have a height and width of level 20. So we can add a Tailwind class name, and we could go width 20 and height 20,

00:33 which works. But when you want the same width and height, in other words, a square aspect ratio, you can use the size utility. And this one will apply both the width and the height at the level 20, which is 80 pixels. All right, so I can remove all of these comments here. Next, below the logo,

00:49 we want our headline. This is the main headline for the page, so I'll have an h1 tag for it. H1, the epic stack. Beautiful. And remember, we do not want to worry about the stars just yet. Below the headline, we're going to have this paragraph of text that says, check the getting

01:05 started guide. And getting started is going to be an anchor tag, since it's probably going to link to the guide file. So let's add a paragraph tag. And I'm going to copy the text below here and paste that in. And remember, we want getting started wrapped in an anchor tag.

01:22 So because of Tailwinds Preflight, you cannot see the style difference, but this is a clickable link. So we're in good shape. And next, we want the list of logos underneath, like this is the case here. So this is going to be an unordered list, since it's clearly a list of things,

01:39 and I don't think the order is really, from a semantic perspective, important. And so inside the unordered list, each tile is going to be an li item. We want to be able to click on it to go to the framework or library that is represented. So inside the li, we'll have an anchor tag. And

01:56 finally, inside the anchor tag, we'll have an image, which is the logo. Let me delete the code for the previous step. And we are going to import the logos, but let's quickly think about the markup. We'll have an unordered list and then a series of li items with inside an anchor tag,

02:14 which is going to go to the library URL. And inside the anchor tag, we're going to have an image. And basically, this li item is going to be repeated once for each logo tile. So instead of repeating the markup, we are also going to import the logos from the same file here,

02:32 logos, which remember is an array of items. So inside the unordered list, we can map over the logos, logos.map. And for each logo, we're going to render this li item. All right, let me scroll

02:47 down a bit. And before I forget, I will add a key to each individual item for React. And here we can access what's in logo. And you can see there's an alt text, href, and src. So let's use the href, which is very likely to be different for each tile. And for the link here, we can send the user

03:05 to logo.href once again. The image is going to be another property of the logo object that we have, logo.src. Perfect. And we can have the alt text to be logo.alt. And so we should be in good shape.

03:22 Let's save this. And there are all the logos. But just like before, we have that problem where the logos are huge because they are not constrained to a specific width. And so to avoid the images being giant, we're going to add a class of width 16, not size 16 because they're not all square.

03:39 But here on the image tag, let's add a class name set to width 16, just so that once again, we're not being overwhelmed with the size of the images. And so we have imported the logos, added the markup. And with that, we have a semantic but yet unstyled markup we can work with.

03:59 And we're ready to move to the next step.