What we're going to build next is the homepage which is also going to be the place where users will start new projects from. So let's go ahead and log in and you should be redirected to the homepage or if you have any other redirect you'll be redirected there. But make sure that you're on the homepage right here where we have our session. So that is inside of source app folder page.tsx right here. So what I'm going to do next is the following.
I'm going to move this page.tsx outside of the main app folder and instead I'm going to separate it in its own route group. So let's create a route group called dashboard. Like this. And then inside you can drag and drop the page.tsx and that will trigger this unsaved event so if you want you can just close that file and click save or don't save it really doesn't matter because as long as you refresh things or shut down your app and restart is going to be completely fine. Great.
So now our root page is located in page in the dashboard folder, right? But because we use the route group or the parentheses folder, it won't be a part of the URL. So the URL is unchanged. But what we can do now is we can create a unique layout for the dashboard. So we can go inside and create a layout.tsx.
So now our out is going to have its own layout and our dashboard will have its own layout. So let's fix the error which we now have by going inside of layout.tsx and writing dashboard layout. Let's create an interface dashboard layout props which will accept the children now let's use these props to destructure the children from the function and we can now render them inside of a wrapped div. There we go, no more errors and right now nothing is changed. So let's go ahead and give this div a class name background muted and minH screen or actually you can simply do height full like this and then what we're gonna do is we're gonna create a sidebar so let's go ahead and do that so sidebar Which we're gonna create inside of this folder dashboard right here, so let's create sidebar .dsx like this and what we're gonna do is the following Export const sidebar and we're going to return a div.
Well let's actually be, let's use a different semantic element so let's use a side with a class name hidden by default visible on large devices using flex. It's going to be fixed. It's going to be flex call. The width of it will be 300 pixels. It's going to be positioned on the left side.
It will not shrink and it will take the full height. And now we can go ahead and write sidebar inside. Now let's go back inside of the layout and we can now import sidebar from .slash sidebar like this. So right now it should not be visible but if you expand you should see the sidebar conflicting with our text right here. So it's not exactly visible right now but we are slowly going to make it more and more visible.
So let's go back inside of our layout here and let's wrap the children inside of another div here and we're gonna give this div on large devices a padding left of 300 pixels. So basically we are going to push the content for the width of the sidebar on large devices when the sidebar is visible and let's also give this the flex flex call and min h we can actually use h full I believe like this so let's try it out now there we go you can see that now sidebar has its own place and my content is separated in this part right here great so now what I want to do is inside of here I want to create a navbar component. Again don't import it from anywhere it does not exist at the moment. So let's go inside of dashboard and create navbar.tsx and let's export const navbar here. Let's return a nav element And I'm gonna go ahead and do the following.
I'm gonna write a class name here, full width flex item center, padding of four and the height of 68 pixels. Inside of it, I'm gonna create a div with a class name MLAuto and I'm going to render our userButton component from FeaturesOut.Components.UserButton. Now let's go back to the layout and let's import the navbar from .slash navbar. So now we should have a navbar component right here and from here we can log out. Great!
Let's go ahead and develop this further. Now that we have the navbar let's head back inside of the layout here and again wrap the children in a main element and give it a class name background white flex 1 overflow auto padding of 8 and rounded top left to excel. Like this. So now when you expand, you should have a cool effect. So you can see that this is our content, right?
And this will be our sidebar and this will be our navbar. So if you zoom out to a hundred percent this is how the layout will look like. Of course it looks a bit weird when zoomed in but that's normal. And we're also going to hide the sidebar on the mobile devices. So Here's what we can maybe do.
We can only do the roundedness on large breakpoint. There we go. So now it's not rounded in this corner but if we expand and have our sidebar it has this cool rounded effect. Great. So now let's go ahead and let's go develop the sidebar here so it actually has some content inside.
Let's create a new logo component inside of the dashboard here. So logo, TSX, let's import link from next link, let's import image from next image And let's import a font space Grotesque from next font Google. Let's import CN from Libutils. Let's define the font space Grotesque with a weight of 700 because we're only going to use the bold variant and the subsets of Latin. Let's export const logo, wrap it inside of a link.
When clicked, the logo will lead back to the homepage, so wherever we click it, that's where it's going to lead. The div will have a class name flex-items-center, gap-x2, hover-opacity 75, transition, height of 68 pixels, and a px of 4. So this is in one line of course then we're gonna have an image component my apologies we're gonna have another div to define the size of the logo size eight and relative and then we're gonna have an image with the source logo.svg and out of image.ai like this and outside of this div we're gonna have an h1 element which will render image.ai as well and a class name which will load font.classname and our custom text extra large and font bold So we are loading this font right here which we have defined. And now that we have this, also make sure that your image is actually called logo. So inside of your public folder you should have logo.svg here.
Now that we have the logo here let's go back inside of the sidebar and instead of rendering the text sidebar we can render logo from .slash logo so don't import the one from the editor and we also have to give this a fill property inside of logo So let's go ahead and try it out and there we go we now have image.ai logo here at the top. Great! Now let's go ahead and let's create the sidebar routes. So head back inside of the sidebar and under the logo add sidebar routes. Like this.
Let's go and create a new component on the same level as our logo, navbar, page and layout inside of the dashboard route group called sidebar-routes.dsx. And let's mark this as useClient so we don't forget to do it later. And let's export const sidebar routes here. And we can return a div SidebarRoutes Let's go back inside of the sidebar and import the newly created SidebarRoutes Great! Now inside of here, let's give this div a class name of Flex FlexColumn, GapY4 and Flex1 like this and then inside of here we're gonna add a small little div so let me just fix this typo which is going to have a class name EX4 and it's going to have a button inside, so make sure you add the import for the button here.
The button will have a crown icon from Lucid React and a text upgraded to Image AI Pro. Let's give the crown a class name of margin right of two, size of four, bill of yellow 500 and also a text of yellow 500, like this. Let's give the button itself an empty on click for now, A class name, width full, rounded extra large, let me scroll up so you can see better, border none, hover background white, hover opacity 75 and transition. Let's give it a variant of outline and a size of large. So I think that already we should start seeing a nice button to upgrade to Image AI Pro.
Or you can simply say upgrade to Pro if you think it's redundant to call the Image AI again. Depending on how you like it. I'm gonna leave it with Image AI Pro. Great And now below this div right here let's add a new div with a class name PX3 and a separator from components UI separator like this. And then we're gonna have an unordered list here with the class name flex flex call gap y1 and px3 again.
And now inside of here, we're going to have our sidebar item component. So let's render the sidebar item like this. Now let's go inside of the dashboard folder and create sidebar-item.tsx like this. Let's prepare the import for link from next link. Let's prepare lucid icon type from lucid react.
And let's import CN from libutils. Let's create an interface sidebar item props, which will accept an icon, which is a type of lucid icon, a label which is a string, href which is a string, isActive which is an optional boolean and an optional onClick if we don't want to use the link method. Now let's export const sidebar item here and let's assign the sidebar item props here. Now in here we can destructure those. Icon, label, href is active and on click.
We can return a link component here. Let's just fix this. And we can give the link an href and also an onclick and now let's go ahead and add a div here with a class name CN and first let's define the default classes which are going to be flex items center PX of 3, PY of 3, rounded extra large, background transparent, hover, background white and transition And then if it is active we're going to keep it white like this. So it indicates that this sidebar item is active. Now we're gonna render the icon and in order to do that we have to create an alias here.
In our props remap the icon to icon with capital I so that we can use it as a component. And let's give it a class name of size 4, margin right of 2 and a stroke of 2. Let's go ahead and open a span element which will render the label. We can give this span element a text small and font medium. There we go.
Now let's go back inside of our sidebar routes here and let's render our first sidebar item. I'm going to import this from .slash sidebar item. So I'm just going to separate these like that. And now let's go ahead and give it the properties we need. So href will be the root here, the icon here for example, let's see what can we use as the icon.
We can use the home icon from Lucid React, so just make sure you imported home from Lucid React here. Let's give it a label of home. And I think that should be it for our sidebar item to render. There we go. And now let's also indicate when this sidebar item is actually active.
So we can do that here by getting the it is use path name path name from use path name from next navigation so I'm just going to move this to the top here and then inside of here we can simply check is active to be if path name matches slash like this. So now if you zoom out a bit, there we go. You can see how homepage is now active because we are on the homepage. Great. Now we're gonna go ahead and do the following.
We can copy this div and the separator here outside of this unordered list here. So inside of here you can add as many routes as you want using the same logic. But we're gonna separate this now because this is where I want to keep my routes but now there is another place where I want to copy this and I'm going to keep some additional routes and they're going to be of a different type. You're going to see in a second what I mean. So the first item here will very simply have an href to whatever we are currently on the icon we're gonna use will be credit card from Lucid React so make sure you've added the import here the label for it will be billing and then we're not going to have is active instead we're going to have on click.
So basically what we're doing is we're telling the href always stay on the current page when being clicked and instead simply do whatever it said to do on click but we don't have any billing functionality yet so we are going to leave it empty and then below that go ahead and add an href to your email your support email in a form of mail to support at code with Antonio.com for example and add an icon to message circle question from Lucid React there we go so let me collapse these icons here so they look nice And in the on click here we don't have to do anything like this and the label can be get help. There we go. Let's try out our sidebar. There we go. So you can see we have the home button here and you can see how the place is clearly separated so you can accept more routes if you want to add them there.
The billing will open the billing page and get help should open your email. Great! So now what I want to do is I want to add a little banner here instead of this text right here and we're gonna add a button inside of that banner which will finally redirect us to the editor and then we can start actually storing our work inside of our database. So let's go ahead and do that. So I want you to go back inside of dashboard page.psx.
We have home here, we have a weight protect server, and we don't need the session at all. Instead, we're gonna give this div a class name flex flex call space y6 max width screen extra large mx auto and padding bottom of 10. And now I'm gonna explain this part and I think perhaps I've already explained it somewhere I'm not sure but we're gonna explain this in a second but let's first add the actual banner element inside so we don't have the banner at the moment so let's go ahead and let's add the banner So it's gonna be in this same folder. Let me close all the other things we have opened and inside of dashboard create a new file banner.tsx and let's export const banner return div banner now we can go back inside of page and we can import banner from .slash banner like this so now if you refresh here you should just see the text which says banner And now we're gonna go ahead and style this. So I'm gonna give this div a class name of AspectRatio, 5x1, a minimum height of 248 pixels, I'm gonna give it flex, gap x 6, padding of 6 items center rounded extra-large background gradient to right we're going to start with from value which will use the following hex color to E6 to CB then we're going to use the via to add the following color 0073FF and lastly we're gonna end with 3FAFF5 so now you should have a nice banner here and now we can explain this max width screen Excel and MX Auto.
So right now you can see that at one point the banner stops expanding right because we have to limit how far our items will expand and I chose a viewport of screen extra large so further than this or this specifically we will not extend this content any longer instead it will just stay centered so that's what we do with these two class names. So if you remove this maxScreenXL and mxAuto, then the banner will expand infinitely and you can see how that looks like. Right, so there has to be a limit or a complete redesign of our dashboard if we want to support screens that wide. So that's why we limit how wide we are going to support inside of here. Now let's go ahead and create a div here with the class name roundedFullSize28 plexItemsCenter justifyCenter backgroundWide with a 50% opacity Inside of that we're gonna create another div which is almost identical to it.
RoundedFull with a bit smaller size again flex item center Justify Center like this, but this time background white and now we have this cool little Double circle effect and inside of here. We're gonna add sparkles from Lucid React make sure you add the import and we're gonna give sparkles a class name of height 20 we're gonna give it a text of our via color right here so just copy your via color paste it here like this and fill will be the exact same thing. There we go. So now we have a nice little sparkles icon inside of here. Now outside of there let's add a new div with a class name flex flex call gap y2 between the elements and h1 which will say visualize your ideas with image AI and the class name which will be text 3xl and font semi bold and then a paragraph turn inspiration into design in no time or you can do whatever you want here simply upload an image and let AI do the rest or whatever you want your copy to be and let's give this a class name of text small and margin bottom of 2 like this and also let's go ahead and in the root of our in our most top div let's define all text to be white, like this.
So this is how it's going to look like. And now, below this paragraph, let's add a button component from components UI button and we're gonna go ahead and give it a variant of secondary oh the variant prop goes inside of here secondary we're gonna give it a class name of a fixed width of 160 pixels and we're gonna say start creating and we're gonna add an arrow right icon from Lucid React like this Let's go ahead and style the arrow right icon by giving it a size 4 and ML of 2. There we go. So now we should have a nice banner here. Beautiful.
And once we click on start creating, we're gonna be redirected to the editor page. Great. And let's just check out if I use iPhone SA. Alright, so it looks like I need to remove some things here. So I just wanna make sure it's at least responsive to some level so this is what we can do here we can find this div which has the first rounded full and we can completely hide it so hidden and then on MD it can be flex let's see how that looks like so it's hidden here it's still hidden and now it appears There we go and let's go ahead and check this out again.
All right, what we can also do to improve the responsivity on I like to check on iPhone SE because it's the smallest device I'm going to support, right? So we can go ahead and define MD to use TextExtra3 Excel and here we can just use text.xl by default or maybe 2xl let's use xl and same thing here so the paragraph can use the MD for text.sm otherwise use text.xs there we go, okay, now it looks like it's responsive perfect, So let me go ahead and expand this and close this. Let's confirm that it still looks nice on desktop and it does. Great. So what we're gonna do next is we're finally gonna go ahead and when we click on start creating we're gonna create the project and later we also must not forget to create a responsive sidebar here which is gonna be quite simple to do but I primarily want to finally start storing projects inside of our database.