Now that we have our Pro Model, let's go ahead and style it a bit. So I want to go inside of the Pro Model component right here. So just ensure that you have this opened. Where are we? Components, Models, Pro Model.
And I want you to prepare whatever you want to use for your picture which is going to be shown here. So I'm going to show you where I find my assets. So head to undraw.co, so not com but .co and in here you can search whatever you want for example upgrade and that's gonna show you some images like this and you can adjust the color to be more specific if you want it. So I'm gonna go ahead and use this one and I'm gonna download the SVG for the project. So I'll draw our open source illustrations so you can use them commercially.
Now that we have that let's go ahead and add that to our public folder. So I'm going to drag and drop ours into public here and let me go ahead and rename this to pro.svg so make sure you have your new image here. Now let's go back inside of our pro model and inside of here let's append that new image of ours. So inside of the dialog content we're gonna go ahead and remove everything and we're going to add a div here with a class name of AspectVideo, Relative, Flex, ItemCenter and JustifyCenter. And then inside we're going to add an image component, which you can import from next slash image.
So let me move this with the imports here. And we're going to go ahead and pass in the source to be our new Pro.svg we're gonna have an alt of Pro we're gonna have a class name of ObjectFit and a fill property like that there we go So now let's just go ahead and style this even further. So I want to add a font for all of my... You can also remove this unused imports. For all of my text here, so I'm going to import Poppins from Next Font Google.
And let me just quickly define the font here so poppins and it's gonna have subsets of Latin and it's gonna have the following weight so we're gonna use 400 500 600 and 700 so we have multiple variations if you want to add some more text inside of here. Great and now let's go ahead and just give this dialogue content a class name and let's limit how wide it can be. So I want to give it 340 pixels. I want to give it no padding and overflow is going to be hidden. All right And now let's go ahead outside of this div encapsulating our image and let's create a new div which is very simply going to have an h2 element which is going to say upgrade to row today.
And if you want to you can also add a little emoji here. On my MacBook I have the emoji keyboard you can just copy one from Google. And let's give this h2 element a class name of font medium and let's give it a text large. Now let's give this div a class name and let's make it dynamic using the CN from libutils. So just make sure you add this import and let me move it here.
So this CN is gonna have the default classes of text neutral 700, MX auto so everything is centered, space Y6 so the elements inside of it are going to be spaced equally, one below another and let's give padding a 6. And then let's also add font class name as the second argument so every text inside has a beautiful font. Great! Now that we have our h2 element, let's go ahead and create a div here with a class name pl3. And in here, let's create an unordered list.
We're gonna give that unordered list a class name of text 11 pixels, space y1, and list disk. And then in here you can write whatever features you plan on adding to your Pro users. So unlimited boards for example. And then you can copy and paste this and add unlimited tools, unlimited organizations, whatever you want to limit, you're gonna see that it's gonna be very easy to limit things once we set up the subscription. So you can play around and write whatever you want here.
And then outside of this div we're gonna add our button component from ./.uiButton So let me show you this import here and I'm going to change it to go to components UI button. And in here we're gonna write upgrade let's go ahead and give this a size of small and let's give it a class name with full like that. There we go. Now we have our Pro model. So if I go ahead and create a new board, there we go.
It says failed to create board. Now of course, if I go ahead and remove all of my boards here, there is a case where we didn't handle the pro model and that is this button right here so that's the empty board component. If you want to you can go inside of here so empty boards and you can add the pro model to open on a failure to create a board. But this is most likely not going to be the failure because of a subscription model. Instead something else will happen.
So I'm not gonna do that here. Here I will always just gracefully handle the error if it happens. So let me just go back here and try this again. So I should be able to do this one as well. And now on the third one, there we go.
It fails and it says upgrade to Pro today. Perfect. So now it's time for us to go ahead and actually start implementing Stripe.