Okay, let's continue, and let's work on the Vue for a single game. So the first thing I want to do is add a new route. So let's go to our routes file, and let's just make a temporary route for now for showing a game. So let's say show, and let's make a new Vue called show. Let's make one here, new file, show.blade.php. And this is going to be, or extend the same layout. Let's do that, and let's end the section here. And let's say show game, and let's see if this works. Back into here, and go show, okay.

And let's say show game, and let's see if this works. Back into here, and go show, okay. So I have a reference screenshot here, so let's get started. So let's start with this section with the game details. So flexbox, first flex item is the image. Second flex item is the details here, so let's do that. Back to our show blade, and let's make a container, mx-auto and px-4 as we've been doing. And then let's call this section game details. And there's a border on it, if you look at the screenshot, there's a border right here. So let's do that, border, border-b actually, border-bottom, and the color is 800 like we've.

And there's a border on it, if you look at the screenshot, there's a border right here. So let's do that, border, border B actually, border bottom, and the color is 800 like we've been doing. And let's give it a pb-12 to separate it from the border, and like I said, it's flex. So let's do that. So the first flex item is the image, and I'm going to make a flex-none, so it just doesn't change size. And this is just going to be an image, and let's just say ff7.jpg and say cover. And the second flex item is the details, so let's do ml-12, and let's put the title in here, so <h2>, font-semibold, text-4xl, Final Fantasy VII Remake, and let's see how this

So let's do that. So I'm going to put those within its own div. So let's say... So it's going to be flex. I'm going to make a flex-wrap, so it wraps onto its own line for responsive. Let's say items-center, let's give it a margin-top, and let's make it so it has some space between them. So this first div is going to have the... I think these two, and then the next div will have the social icons. So this will be flex as well, items-center, and this is just the circle, which like I

Because it should be on the outside, okay? Awesome. So let's go ahead and copy-paste this, and we'll just change it to memberRating. Or what's the other thing? The other thing is criticScore. So let's just change this to criticScore and say 92%, okay? And next we have the social icons, let's do that. That will be after this. Again, it's going to be flex, items center, and let's put a space, x of 4, and these will have socialIcons.

So this is a circle, so class equals width-8, height-8, bg-gray-800, rounded-full, flex, justify-center, and items-center. And from within here is where our SVG will go. So it's going to be a link, and I also want it to change on hover or the color. So hover:text-gray-400, and let's just put a character in here for now, see if that works. Okay, cool. So if I duplicate this, you'll see how it looks. So it would be this, and then I will just, that's four, do this behind the scenes, and put the SVG icons in here. So let me do one quickly, and then I'll edit in the rest.

section. So that would be just the screenshots here, so let's do that, back to our code, and we'll leave our ending this section, I don't think I named it, but I'm going to name it, so endGameDetails, and I'm going to put a class here, just so I can see where I am when I'm scrolling, I did put one, so it's good, and let's start to the next section, let's call it imagesContainer, and let me just put the comment in here now, so I don't forget, and imagesContainer, okay, and this has a border on the bottom too, so let's go ahead and do that, border-gray-800, pb-12, mt-8, okay, and I'm just going to grab an h2 from here, because it's the same heading, let's put it here, and let's call it images, and let's see how this looks.

it's the same heading, let's put it here, and let's call it images, and let's see how this looks. Okay, it looks pretty good, so again, we're going to make use of CSS grid, and just layout our images in this grid of thirds, so that's easy enough, let's do .grid, grid calls 3, let's give it a gap of 12, and a margin top of 8, and this should separate it into thirds, so let's say, let's see, 2, 3, 4, 5, 6, okay, and that looks like it works, and now we just have to put it into images, so let's put them within their own container, and it's going to be a link, and it's going to be an image within this link, and I have some images here set up already, so screenshot1 through screenshot6, I believe, and let's just name it alternateScreenshot, and let's give it a class of hover, opacity 75, transition, ease-in, out, and

copy and paste that, and then that will be our index page, I mean, our show page for a single game, so let's end, or let's do the same thing for this, and we'll call it similarGamesContainer, and let's make sure to close that div out, and say end similarGames, similarGamesContainer, okay, and say similarGames, cool, and now, like I said, we can just go to our index page, and pretty much grab this popularGames section, but we only want 6, I believe, so let me see how it looks, so I'm going to grab this, and later on we'll move this to a Blade component, so we're not repeating code, but for now I'll just paste it in, okay, and that looks pretty good, I'm just going to erase these, since we only want 6, okay, so I erased 6 of them, and now we only have 6, cool, and I guess we don't need this border-bottom here, so we can get rid of all this, and I guess we