Homepage with Tailwind CSS & Link

[00:00:00]
>> First thing first is we should work on the home page. Let's actually just get our routes figured out. What is the structure of our app? What are the routes gonna look like? How are you navigating to places and things like that? So let's build out our routes, that's kind of where I like to start.

[00:00:16]
And then from there, what I'll like to do is just go from page to page. Sometimes I might get sidetracked, where I'm like, this page has a feature, and that feature touches so many parts of the app, so you gotta go build those things out. So I guess it's a death-first approach to building an app.

[00:00:34]
I'll go to a page, and then I'll drill down every single feature into that page before I go to the next page, and I'll drill down every feature on that page before I go to the next page. That way, I'm not switching back and forth between different features, and I don't wanna leave anything in an incomplete state.

[00:00:49]
So that's kinda how I work when I'm working solo. So that's what we'll probably do today. So let's get that structure going so we know, like I said, I have the reference here. On GitHub, we can kinda take a look at all the routes that we have. It's actually really not that much, so few routes here.

[00:01:09]
We obviously have our index page, which is just going to be page.tsx. That's gonna be our homepage, so we'll be putting some stuff in there. Then we have these five other folders. So this first folder is dashboard. But if you put parentheses around a folder in Next.js app router, this doesn't get added to the segment in the route.

[00:01:29]
So this won't actually be a new route, it's just a way for me to group pages together that have similar UI. So we need to make that. We have our API, we'll talk about that some other time. We got this new-user thing here, and this is actually just a hack around authentication, we'll talk about that later.

[00:01:47]
And then we also have these two catch-all routes for sign-in and sign-up that we'll also use for authentication. So we'll just pretty much go in and make these right quick, so let's do that. So over here in my directory, I'll make a new folder, dashboard with parentheses in it.

[00:02:07]
So we have that. And then next to that, I'm just gonna add my API. And another folder, we're going to have new-user. And another one will be sign-up, and another one would be sign-in. Not a file, but a folder. Cool, so we have all of our folders here.

[00:02:44]
They don't really do anything until we add a page.tsx to them. So we can't really route to them right now, but just so you can visualize what's happening here. For now, let's just work on the homepage, it's pretty simple, just some design here. And then we'll move on to actually doing the dashboard, getting user authentication, and stuff like that.

[00:03:04]
So you can think of this as our warm-up, just getting our fingers ready on these components. So this one's not too crazy, in fact, it doesn't even have a lot of functionality, but let's do it. So basically, for this one, just want to add a class name here, and we're gonna be using Tailwind.

[00:03:19]
So I'm just gonna make this page full screen vertically and horizontally. So I can just say, w-screen and h-screen, like that. That's the same thing as saying our width is 100% VW, view width, and height is 100 VH, which is view height. It's the same thing. So we got that, I'm just gonna put a background of black on a dark theme there.

[00:03:47]
We'll start from that, and then what I'll do is, I'm actually just gonna make this a flex. So I'll say flex, and then I'll say justify-center, and then items, which is a line, items-center, like that. And I'll just add a div for our content. So inside our content, we'll just have an h1 here, this is where our title will go.

[00:04:17]
And we'll have a paragraph here, this is where our description will go. And then we'll have another div here with a button in it, and this is where our button will go. Other thing you wanna do is just make sure the text is white, like that, otherwise it'll be black and we won't be able see the text.

[00:04:44]
Cool, so let's go check this out wherever I put this. Here we go, it's exactly what I wanted to be centered in the middle of screen. Pretty easy, let's make this title bigger. So I can say className, give it a text of, I don't know, 5xl, so that's huge.

[00:05:04]
Actually, that's not even as huge as I thought it was gonna be, [LAUGH] so I'm gonna make it even bigger. Yeah, 6xl for our title, and I'll say, The best Journal, app for hardcore. No, just the best journal app, period. We could just use ChatGPT to make this for us.

[00:05:28]
Honestly, that's what we should have did, but we're gonna save the AI stuff for later. So best Journal app, period. And then further description, this is the best app for tracking your mood throughout, Your life. All you have to do is be, Honest. [LAUGH] There you go. Cool, so we got that, we'll make that a little bigger.

[00:06:04]
So className, maybe make that like a text of 2xl. That's good. And then make this one not as bright, so we can say, text, and then white. And then we can do slash here for opacity, and I could make it a little, let's try 60. So that's 0.6 or 60%.

[00:06:26]
There we go. The other thing we can do is that I don't like how far left and right these things go. So what I'll do is, you can put a container on it, but the containers already has set max widths, and then you've got to go modify the Tailwind config to do that.

[00:06:41]
It's a little sloppy, so I'm just gonna do my own container, and just do a max width. So on this div, that contains the content, I'll add a className here, and I'll say width is full. So 100% but I'll put a max width. And let's pick a random number, right?

[00:06:59]
I'll just say, let's say a max width of 600 pixels. So when you put a square bracket around a value like this and tell one class, this means I wanna add a custom value instead of some hard coded values, or whatever value I want here. And then just to make sure it stays centered, you can just say mx-auto, which just stands for margin left, margin right auto, so it stays centered.

[00:07:27]
That will do that, and there we go. Cool, other thing is I don't like how they're touching. So what's the margin bottom on these? A Margin bottom of 4 on that, another margin bottom on the paragraph of 4 so they're not touching. There we go. And then for the button, we'll just make a little button right quick.

[00:08:02]
We can just call this a background of blue-600, like that. And we can add some padding of 4, and then we can say we want it to be rounded corners. Let's make it a rounded large, and then we'll say font or text-lg. Actually, text-xl. There we go. And actually, I'm gonna change the padding from 4 to px-4, and then py of 2.

[00:08:42]
There we go, much better. And now you got a button, cool. Only thing we need to do is just make this button go somewhere when you click something, so let's do that. So I'll wrap this button in a link tag. So if I bring in the link tag from next link, like so.

[00:09:03]
Mine just auto import it if you're wondering why I didn't go import it cuz it's did it for me, but it's from next link. You've probably used it before if you use Next.js. And then all you have to do is just add a href here, and then the path you wanna go to.

[00:09:15]
In this case, when someone clicks get started, we want them to go to /journal, which we haven't made yet. So obviously, it'll 404 if we click on it. And that's it. And we just made award-winning landing page. So now if we click that, goes a journal, we get 404.

[00:09:38]
Cool, so the light work with a Tailwind and a React. Okay,