Let's make that homepage editable. So let's head to the control panel. We're going to head to blueprints. We're going to create a new blueprint for the pages collection. And we're going to call it home. Next we're going to hide this because I only want this to be used in one page. I don't want this to be in the picker. Actually, why don't we call this landing and maybe we want to have reusable landing pages. Let's do that. Okay, so we're not going to hide that.

Or we can choose to have that little setting to turn that on and off. I think we're going to have some kind of side-by-side panels with some text. All right. Let's start at the top. We've got title. We'll use that for the h1. Great. Let's create a new field called subtitle. Let's create another one for that little tertiary header and call it teaser. Next, we'll add a little toggle switch to say showLightningBolts.

Let's create another one for that little tertiary header and call it teaser. Next, we'll add a little toggle switch to say show lightning bolts. And we'll set the default value to be true. All right. Let's start there and hook this stuff up. Let's go to the homepage. Since this page has already been created but we don't have a blueprint field, we're going to go into the code. We're going to go to the homepage. I'm going to tell it to use the landing blueprint.

This is just a simple explanation with no code.

And let's try again. Now we can add bold. We can add the H1. We can add the teaser. And we're going to show the lightning bolts. Let's save that. And come to our template and we're going to wire that up. All right. Those variable names were teaser. Got our H1 right here.

Those variable names were teaser. Got our H1 right here. There's title. So here we run into our first case where the HTML is not going to necessarily work with how we're structuring our content. So we've got a markdown field, which is going to render HTML. And it's going to render its own p tag, which will not have these classes on it. So my preference is to make some helper classes or wrapper classes, much like Tailwind's prose class, that you can just use throughout the site. And that way you don't have to worry about trying to inject.

That means we're going to collide with this. This should be enough to override the default style looking like it. So let's just give this a shot. Move those classes. Let's go to Tailwind.css inside our resources directory. Okay, here you can see the default. Here you can see Satomic's defaults. And site is the file that we're going to want to put our own CSS in. This is just kind of pre-wired for you so you don't have to scaffold all this stuff out. So we're going to make hero p.

Looking pretty good. So this did get reset. So let's just change this to like an h6. There we go. Last, we're going to hook up this little toggle switch to show or hide these lightning bolts. So we'll do an if condition. If showLightningBolts. Close the if. I like to indent code for management purposes. I don't really worry about the output of the code.

I like to indent code for management purposes. I don't really worry about the output of the code. For me, putting an indent here inside of an if statement is more readable. This will make an indent in your output, your rendered HTML, just because of the white space. But I think it's worth it. All right, let's come back. And then if we go to the home page here, do a little live preview, now we can see that show lightning bolts on and off. It's going to hide that. And we can tell that everything's working the way we want to.

This gets us the ability to create more fields inside of this field. So let's think here. We've got this image, maybe a toggle to show or hide this dude. We've got this box with three bits of text or really two bits of text and a button. And we've got the same thing but in reverse. So let's start with an assets field for that first image. We're going to call this supportingImage. We're going to make maximum files one. And we're going to finish. Next, we're going to have a text field for that little header.

And we're going to finish. Next, we're going to have a text field for that little header. We'll add a markdown field for panel content. Maybe we'll call this panel header. It might make our code a little more readable. Supporting image, panel header. And there's only one image, right? We've just got this one. There's no image in here. See, I'm just figuring this out as we go. This is kind of the process.

See, I'm just figuring this out as we go. This is kind of the process. We'll call it panelImage. Once you've created a field, Statamic is going to stop kind of auto-slugging for you. That way you don't accidentally change a field. And then we're going to have callToAction. We'll call this CTA. text, callToActionText. We'll just keep it short.

This is just a simple explanation with no code.

Now we can go back to our homepage. And now we have this panel section. Let's start hooking this up. We want that one first. Panel header says this is heavy. Panel content. Pop the hood. And the link. We'll just give it like a placeholder link for now. All right. Let's save this.

We'll just give it like a placeholder link for now. All right. Let's save this. Now it's actually a good time to show you a little trick here. Save and Publish is going to save and go back to the main index. You can choose what you want to do after saving. So we can do Continue Editing. That way when we save, we stay on the same page. Also, you can hit Command-S or Control-S on Windows. And that will also save the entry. All right. Let's hook this up.

And that will also save the entry. All right. Let's hook this up. We'll turn this first one into a loop. Panels, I believe, is what we called it. If we come back to the control panel, and if you hover over a field, you'll see the actual handle name. So right here we've got panels. That's correct. Open and close for a loop. And now we can hook up the variables inside here. So this would be panelImage.

And now we can hook up the variables inside here. So this would be panelImage. And the value of an asset by itself is the URL. So it's nice and easy. This should be panelHeader. And now I see that we actually had an H2 and a paragraph separately here. So let's go back and make an adjustment. panels, panelHeader, panelContent. Let's rename this one panelTeaser like we had in the top hero area. We'll just be consistent with that naming mechanism.

Looks pretty close. What did we get wrong? So here's what happened. I renamed a field, but I didn't go back to the actual content and re-save it. So let's do that. Go to the home page. panelTeaser is going to be unset. So that should be... This is heavy. This is actually the header. Let's save. There we go. Almost there.

So let's do that. To keep this simple, let's make the odd ones, the first, third, fifth, etc. panels. The odd ones will have the paint and the guy facing this way, and the even ones will be like this, and they'll just flip-flop. Alright, we're going to do a condition here based on the count of the loop that we're on. So if count is divisible by 2, then that'll be even. Else, this will be odd right here. So what we want to do is grab the changes that would be on the odd one and bring them up to the top. So that would be this guy.

So what we want to do is grab the changes that would be on the odd one and bring them up to the top. So that would be this guy. Refresh. Looks pretty good, no coffee. Well, looks pretty good except that I did get them backwards. I'm human. There we go. Now we just need to flip-flop these guys right here. If count is above by 2. A little ternary assignment operator here.

They're basically the same thing. Except they're not the same thing. Why would I say that? Anyway, there we go. The last thing we need to do is kind of adjust the spacing between the two. Let's see. We have this on all of the ones that aren't the first. So let's grab that class. Let's go up here. If it's not first, add the class MarginTop32 and close it.