And for a quick refresher, just in case you're unfamiliar, if you ever request a page that doesn't exist, you will hit the 404. OK, let's go to Sublime Text. So as it turns out, behind the scenes, Laravel is going to check to see if you have an errors folder. And if so, it'll check to see, well, do you have a partial, a file that corresponds to the status code that it is rendering? So in our case, if we were to create a resources/views/errors/404 file, let's give this a shot. We'll say, uh-oh, and switch back to Chrome.

let's give this a shot. We'll say, uh-oh, and switch back to Chrome. If I give it a refresh, we now have complete control here. So the way we handle this, it's just up to you. So for example, in Laravel's case, for Laravel.com, you can see it's still using the basic master page for the site. And then they just add a little section here. In our case, though, we're creating kind of a unique static page here. So with that in mind, I don't have to pull in my master page. I don't even have to pull in the compiled CSS.

But honestly, that's beyond the scope of what I cover at LayerCast. I don't even really know how to use After Effects. So I'm taking it at the halfway point. Anyways, we'll come back. We'll even put this in line. I think that's okay. And indent. All right, so we've pulled in this BodyMovement library. We're going to load our animation. And you'll notice I need to give it a path to the data.json file.

We're going to load our animation. And you'll notice I need to give it a path to the data.json file. Let's open my desktop. Now you'll see I do have this 404 folder. And here is the data.json file that was sent to me. So let's just copy it and move it to public/js/404.json and paste it in. Okay, now we can update the path. Like so. Next, the renderer. We're going to use SVG.

Next, the renderer. We're going to use SVG. We do want it to loop. We do want it to autoplay. Name for future reference. We don't need that. So I think this looks fairly good. Next, you can see it's looking for our container per usual. So let's just create a div with an ID of Lottie. And that means this is the container where the SVG will be inserted.

Next, you'll remember that before he had this section here. But of course, I want to write that up as HTML. I don't want that to be a part of the JSON file that we're reading with the JavaScript library. So let's get started on HTML. Maybe right before it, we'll have a div here with an h1 that says, you have ventured into 404 space. But yeah, now if I give this a refresh, you'll see it's just going to stack it, right? So we're going to have that div and then that div below it. So we'll have to write some CSS to position this properly. Until then, though, let's just get the HTML out of the way.

Yeah. Next, you can see the tracking is just a little bit wider. So why don't we say tracking. Once again, this is Tailwind classes. There's a tracking-wide class that we can use. And you can see that will set the letter spacing like so. Next, the text is quite a bit larger than what we have at the moment. So why don't we try out text-lg, text-xl. Oh, no. Let's do four.

There we go. And on that note, there should also be a good amount of margin-bottom six. Yeah. We might even want more, but we'll give that a shot. What else? So here, the text should be a little larger than what we have. So how about text-xl? Is that okay there? Yeah, not too bad.

Quite a bit closer. I think that looks good, actually. So let's move on to the buttons. Beam me home and sign up to escape. So this will be a good number of classes here, but stick with me. So first things first. There needs to be a border around here. It looks like two pixels, maybe. So let's say border: 2px wide. Give it a refresh.

All right, so now I can get rid of that. Come back, give it a refresh. There you go. Ah, but the text is that color as well. Yeah, we should probably extract a class here. Let's just do it one more time. Get rid of that. If I were actually using Tailwind and I could make it configurable, I would just make sure that my layerCast turquoise color is an actual shade of something I could use,

So in situations like this, we can see, all right, well, by default, mobile first. I want flex column. But then once we get to a medium breakpoint, let's switch to flex row. And you can see I've added that there. Very simple stuff. Anyways, I think it's looking pretty good. So you know what? Let's just deploy this thing together. We'll do a git status. Let's add everything.

We'll do a git status. Let's add everything. And then do a git commit with add borg-404-page. And I will push it up. All right. So we did that in real time. Hopefully, everything's OK. And there we go. It's live. So a huge improvement from where we started.