Design the Tesla landing page in Penpot | Penpot tutorial

Hello everyone, Samuel Fabayo here, and in today's video we're going to be designing the landing page for the Tesla website in Penpot. Penpot is an interface design tool that is free and open source. It is a decent alternative to Figma. In this video, we're going to be designing the hero section of the Tesla Model 3 website, and we are also going to be designing the top nav, showing how this drawer was designed where you can access all the other models for the Tesla. Also, I'd like to show you how to design this subtle, nice interaction between the different models of the car as well. By the end of the video, you should be able to design a similar website in Penpot. Let's get into it. All right, so let's go to www.penpot.app. Once you get into there, of course, if you haven't created an account with Penpot, all you just need to do is sign up. It only takes about 3 minutes, but I've already signed up, so I'll just log in, and that immediately takes me to my Penpot account. And similar to what you have in Figma, you have like your project here in the middle, or on this side you have your project, and then on the left side here you have your drafts, you have your libraries, and then you have your fonts. With your libraries that you have at the bottom here, you can pick up pre-designed templates for your, for your designs if you don't want to start from scratch. And you can also add to your libraries on this side. Also here, you can click here to upload a new font that you don't have, any font that you can't find on Penpot. You can just upload that from your own personal font library. You can add that as a custom font. I've already added a font here, that's why you can find the SF Pro font here. So now I'm going to go back into projects and I am going to create a new project, which I would name Tesla landing page. Once that is done, I'm going to get into my projects. And then once I do that, I get into the actual interface. So let me just introduce the interface quickly. On the left side here, you have the layers and the assets similar to Figma as well. Your layer is going to have everything that you are putting on your designs. So that you can easily find them. You can create pages if you have a large design file and you want people to be able to navigate between pages. And then you can have your assets, which is going to have like your components, your colors, and your typography styles as well. And maybe even if you have some kind of icons, all of that can fit in the assets panel. At the top here, we have the, um, your toolbar, which you're going to use very often. You have the move tool here, the move icon. And then you have the board here, which is similar to the frame function on Framer and the artboard tool on Adobe. And then you have your rectangle, your circle, your text if you need to bring in a text. If you need to import an image, your image tool. And then this is called curve, but it actually just acts like a pen tool if you want to do like a freehand sketch. So I don't know why it's called why it's called curve. I would just call it a pen tool. And then you have like a path tool if you want to draw like straight paths. Then on the right-hand side here, you have your configuration panel for everything that you design on the artboard. This is where you get to configure stuff. If you want to prototype stuff, this is where you click. And then if you want to, um, if a developer wants to get into your file to understand how to develop or build what you've designed, this is where they get into inspect element to inspect the code. So yeah, that's a quick run-through of what the interface looks like. So to start with this particular website, I'm going to be creating a board here. I'll drop a board here. This board is a free size, but I'm going to give it a size that I want, which is a web size. And I can come on the right-hand side here to size presets, and then I can pick the exact size that I want. I'm looking for a web size Um, and looking for 1366. You also have other ones here— print, you have Instagram, social media, Facebook, whatever. You know, you have a lot of templates here, but I'm going to be using the 1366 by 768. So I have my canvas where I'm going to be putting all my designs in, which is 1366 by 768. The first thing we're going to do is to bring in this image for this car. Into our design. As you can see, we have a lot of assets that is used on the website. There's like this car, this icon, the second car here which is the red car. Then if you come here, you have like these 3 other cars, the Model 3, the Model Y, and the Cybertruck. So we have a lot of assets. All of these assets have been pre-downloaded and you can get access to them by going to the link in the description so that you don't have to go through inspect elements to download all of this. You can grab the assets and you can design with me. We're going to be starting with this, so we're going to be bringing in this car into the artboard. So I'll just go into my file quickly and I'm going to try to grab that car and I'll bring it into the artboard. So yeah, I have the car right here. I'm going to try to resize this just so it fits The artboard, it looks too big right now, so I'm just going to resize it. Yeah, this feels a little bit more like it. I'm going to try to use this, um, tiles at the back as my grid so I can understand exactly how their own was. So if you look at it, they have like a small half tile here, they have 1, 2, 3 tile, and then they have very small piece at the top here. So I'll try to follow that. If I try to follow that, I have like this small one here, so I have to move this to the side just a little bit, and then so that I can have like that small half cutout at the top there too. Yeah, this looks like what they have on their own site, which is good. The next thing we need to do now is to bring in the text and the button into the design. From the text, we have Model 3 Standard Long Range, so let's bring that in. I'm gonna write, um, So I just grab my text here and I type Model 3 and then Standard Long Range. The text here, when I checked it using the font checker, is called Universal Sans. The text used here is $75, so I'm going to be using a free alternative that is already installed on Penpot. That free alternative is Inter. So I'll change this text size to Inter. I'll change the text to white, and I'll increase the text size to about 44 just to look like what they have there. And then I'll also change the width of the font to like 600. I'll also change the spacing in between the fonts. If you look at this, this has like closer spacing in between, so I'll change that spacing here, and I'll change it to like -1.5. That's looking a little bit more like it, but this text looks like it's a bit too heavy, so I'll change it to 500. I think 500 feels more like it. Yes, 500 feels more like it. And if you also look at the text, it is just sitting beneath this one big tile at the bottom here, so I'm going to try to achieve that same thing. I'll bring that here and I'll make sure it sits just beneath the tile there. Yep, that feels very, very like it. And then this is the same thing with the standard long range. I'll change this to Inter as well. I'll change this to like a 500 too, or maybe even a 600. Yeah, feels like a 600. And then for the spacing, I'll use -0.4. Yeah, then I'll change the color to white. I'm basically just changing the color and the fill here, so I'll just do that. And yeah, if we look at it here, it's, it's long. It's longer than this text here, so it's obviously a bigger text size that was used. So I'm guessing what they used there is like a 15. Actually, it looks like the text that is used for this model 3 is— yeah, even the way the car is positioned on this, it feels like you could definitely— yeah, the car looks like too big from what they have there. I mean, the goal here is not to make sure that it is the exact same thing, but want to try to be as close as possible. So that's just what I'm trying to do. So when you look at it now, we can definitely move this, um, a bit more to the right here. And then we have this as well. Yeah, so I have to sort of adjust this, maybe give it a font size of 17. Okay, so it says Standard and Long Range, not Standard Long Range, Standard and Long Range. Um, I'll adjust that a bit more and I'll give it a 16. Yeah, that feels like it. The NG and the E is just hanging outside the 3 here. So that feels like, that feels like it's closer to what they have there. So next thing you want to do now is to, um, create the buttons. So there are different ways of creating a button for this. You could decide to use a component to create your buttons. You can use auto layouts to create your buttons. Auto layouts in Penpot is called flex layout, but I won't be using components because the components in Penpot hasn't been properly designed just yet. They only have the components, they don't have the variants of the component. So you can't create variants of your components and make changes to that variant. So there's no point using components for this. But what I'll be using definitely is their flex layout, which I think is very, very well designed. I really like the way the flex layout in Penpot is designed. So I'm going to write this order now, which is the first button. Um, it looks like the button text is like, um, like an 11. Yeah, that feels like an 11. And then I would add a flex layout to that. Once I add a flex layout to that, what it means is that I can give it a padding at the top and at the bottom, a consistent padding at the top and the bottom. And that is what I do on this layout panel here. So let's say I want my padding at the top to be 8, and I want my padding at the sides on the left and the right to be like maybe 120 because the text, the button looks like really long. But I think 120 is too long, so I could make that maybe more like 96, which feels more like it. And I can change the color as well for the fill. It has like this faint blue. Yeah, it has like this blue, which is what I'll be using there as well. So I have that for the button. That feels like it. It feels like it feels quite similar to the button. Um, let me just reduce it a bit, um, to like 84. Yeah, this feels a lot more like it because I'm using like the spacing that is here to judge that. And then I have my button now, and then I'll just have my second button. My second button is Learn More. Yeah, and then I'll just create a background for the second button as well. It's going to be like a, like an off-black background. I'm not picking the exact colors that they use there, I'm just trying to pick the closest colors to that so that we don't spend the entire day working on this. Also, this button has some rounded corners. If you look at it here, there are some rounded corners here, so I want to add those rounded corners to this. I'll come to the top here and add rounded corners. So now you can see that there are rounded corners on this as well. And then I'll come here and I'll add rounded corners as well. So the, the, the auto layout on this, like I said, I really like it. It's really good. Um, if you click this auto layout, you see that on this side there's 84, which is like consistent padding. If I continue to add stuff into this, say order now, today, or miss your chance. You see that it's just expanding what I have there, and I can erase that to just leave that as other now, and it just adjusts that as well. So that's how the auto layout works. And if you want to do any kind of configuration on the auto layout, you can do it on this side. Also, you have your alignment on this side, which I'm going to get into as I also work on like this tutorial. And then you have other settings here where you can adjust how you want the, the width to be. For example, this is set to fit content, which is the reason why this button is longer than this button. If you look at it, you'll see that this button, the black button, is longer than the blue button because the text inside it is longer. But we want it to be fixed. You want the button sizes to be the same thing. So I'm going to come here and I'm going to change this to fixed width instead of fit content. I'll change it to fixed width. I'll do the same thing for this as well. I'll change it to fixed width. Then I'll make the width maybe something like 224. And I'll make this to 24 as well. So what that means is that if I keep adding text into this, if I keep adding text into this layer now, it is not going to adjust the way it was adjusting because I've said that the width should be fixed. So we have our button now. The last one is to have like this small button here that keeps blinking. And the, and the, um, chevron that we have on the left side here. So when I come back here, that's the next thing I want to do. I'm gonna take this up a bit and then I'll bring in that. I'll just copy the standard and long grid and use that to write that text. That text says switch to performance, so I'll say switch to performance. And it looks like a really small text, smaller than the text that we have here. So I'll change that to like a 10, and then I would bring in my accordion. Also, I think it's too tight, so I'll just change the spacing a bit so it has a little bit more space to like breathe. So once I do that, what I want to do now is to bring in, um, my, my accordion. So I'll just go into my library and bring in the icon. I'll bring that in here. It's— that's it. It's really big, so I need to adjust it, obviously. Um, let me just adjust. Let me change the color first to white, and then I'm going to change the size to like 24. I'm sure it's going to fling it somewhere. Now I'll change— I have to make this, um, I have to click this so that it changes the size on the width and on the height. It's consistent. So yeah, that's done, and it has thrown it somewhere. Okay, it's just here, so I'll bring it back into this. And I have my accordion now. If I look at it, I think it's pointing downwards, so I have to change that to come downwards, right? So once I have that I think I should use 20 because it feels a lot smaller in what I have in that place. So I'm going to put the accordion and this text into another auto layout, into another flex layout. Since I'm on Penpot, I'm not going to be calling it auto layout, I'll be calling this flex layout. So I'll put it in another flex layout, and once I do that, I want to make sure that it is just aligned to the center, right? Because right now it's aligned to the top, so I want to make sure that it's aligned to the center. So this is where you do your settings as well. You can Yeah, align it to the center, align it to the top, and align it to the bottom. And then the spacing between is going to be like about 4. So I have this button here now, and it looks like we're good with the text that we have here. So one thing I'm going to do again is I think the rounded corners I added to this is too much, so I'll change it to 2. So one thing I'm going to do is I'm going to try to like organize this. I'll put this in its own flex layout. I'll put this button in its own flex layout, and then this one will be standalone. So this button, the spacing between it, I would make it— I think a 12 should be fine for the spacing between the buttons there. And then I'll make sure that I have, which is what it looks like here, the spacing between the Model 3 and these buttons is going to be about 24. I mean, that's what it looks like here, right? It looks like it's a 24 there. So I'll just move this up a bit. Yeah, I think the button is too thick. Um, that's why it is not looking like what we have there. So I'll just change this to like a 6, but it's not changing because this is set to fixed height, so I'm going to change it to fit content. So once I do that, it changes. And I'll do the same thing for this as well. I'll change it to fixed content, and then I'll change it to 6. So that way it is going to change. So I just have the switch performance button here, and I'll just add all of this and add all of them in its own flex layout. So the spacing for this would be like 20. So yeah, this looks a lot like what we have on the actual website if we look at it. That looks a lot like it if we look back. So we are done with this now. The next thing that I want to work on is this top navigation here, the one that has vehicle, energy, charging, discover, shop, the Tesla logo, and then the icons at the top here. And then if you can see, there's an hover state which you're going to be getting into later. So let's work on the first navigation. To work on the first navigation, we are going to create a board at the top here. Make sure that that board is the same size with the actual board for the design. So I'm going to change this to 1366, right? And then I'll make that board a blackboard just so anything I put on it can be clear. So let's zoom into this side since this is where we're working on. I'll bring in the Tesla logo, which I already have here, and you should have that in your own assets as well. Um, the white version of the logo. I'll bring that in. And let me also just bring in the icons because I'm going to need them now. Yeah, yeah, everything looks so huge, so I have to resize them. If I resize the icons, I can make that like a 30. Again, I have to make sure that this is clicked so that it resizes it properly on both sides. Um, I have to resize this as well, 30, and then this one to 30. Let's see. So I have all of my icons there. They're all layered on each other. So, um, yeah, I'll bring it close. I don't need that yet. Let me work on the, on the Tesla logo. For Tesla logo, I think 60 should be fine for the Tesla logo for the size. Actually, that's too small, too small. I have to increase it. Let me go for 120. Yeah, 120 looks like Yeah, I want it to look like that. That's good. And then I have the icons as well. My icons are supposed to be white. All the icons are here together. That's why it looks like this. So I'll just come to selected colors and I'll pick that and I'll select color white for that and then move up the icons. Yeah. When you look at the website, it has the help icon first, then the global icon. And the user icon. So help should come first. Global should come next. I think these icons might be too big. So I'm going to be resizing them to about 24. And then I'll put all these icons also in a flex layout. And I'll put a spacing of say 12 in between. So I can put my icons to the far right here. The next thing I need to do now is to work on like this, um, menu items here: Vehicle, Energy, Charging, Discover, and Shop. So I'll come here and I'll bring in my text. Vehicle, we have that. I think the text that was used here is the same thing with this Order Now text. I'm talking about the text size, so 11 should be fine for that. And I'm going to put this in its own flex layout as well. And I'll tell you why I'm doing this later because it's going to come in handy. But the flex layout for this will be like 2 on that side and maybe about 6 on the right and the left. So once I have that in, I just need to duplicate this so that I can create the other ones. So it says v Very cool energy and shop. I like to make sure that all my texts are like center aligned here so it doesn't start looking weird later. So that's why I'm just doing that. If I'd done that on the master version before I started duplicating it, I wouldn't have to do that. For everything here now. So I have that and I'm going to put all of this into a flex layout as well so that there's consistent spacing in between. And I would put a spacing of 12 in between all of this. That, that looks like what they have here for like the spacing. Yeah, it looks like what they have there for the spacing. But yeah, we're not sure of that just yet. So we have our navbar, but just to make things look really clean I think this Tesla logo needs to be bigger, maybe 132 or even 148. That looks more like it. So what I'm going to do again, you guessed right, I'm going to put everything in a flex layout so that everything is aligned. But if you can see, there's no alignment. This is in the middle, this is at the top, this is at the top, and that's because this here is set to align to the top. I want to align everything to the center, so now it is aligned. Also Something else is wrong. I need to move all of this to the side. So that's in the center now. So we have our navbar, but there's one more thing that we need to do. We need to move it here. And we also need to make sure that the navbar is the same width as the nav itself, as the website design itself. And that width is going to be 1366. But because it is set to fit content, on the width, I can't adjust it here. So I'm going to set it to fixed width because I want the width of the navbar to be fixed for this particular design. So I've set that to fixed width. Once I do that, I can then add, um, the padding on the side. That this is what I want it to be on this side and this side, and I can add a padding of 32. So once I add that padding, I can then bring it into this Right, I can just press copy and paste it here. So I have that there, but it's not looking quite aligned. Yeah, I think that's, I think that's it. Um, yeah, I would like to add to the auto layout, I would like to add some padding at the top as well. But it's set to, um, yeah, set to fit content at the top. So we have like that at the top as well. In fact, I'd like to make that 8, right? So we have that at the top, and I can make sure that this is properly— yeah, so we have all of that. This looks fine, this looks good. It looks like the spacing between this and this is the same, so we are good. With that. So what we've done now is we've been able to design this particular one. This is all done. The next thing you want to do is to design the second one, which is like the red one. And that is very easy because we've already done this. We've done the hard work here. All we just need to do is duplicate this. And then once we duplicate this, the first thing that we will do is to take this and change this image to the image of the Red car, and that's it. We have that there. Another thing that is different here is switch to Model 3 and switch to Performance. So this one is switch to Performance, while this one is switch to Model 3. Model 3. What else is different? Let me have a look. This is Model 3 Performance, Standard, and Long Range. So this is supposed to be Performance here. So yeah, we're good with that. We have this done, we have this done. Now we want to work on this particular side, the navigation and the drawer that shows like the detailed view if you want to go between Model 3, Model Y, and Cybertruck, and then some menu on the side here as well. So this is the next thing that we're going to do now. Um, from the design itself, if you look at it, it looks like this is actually sitting just above the text at the bottom here, just above this text at the bottom here. If I go, it's gonna hover away. So it looks like that's sitting just above that. So we're going to use that as like our guide to know what the height of this, um, expanded nav looks like. So first of all, what we're going to do is we're going to bring in another board and we're going to draw that. Our width is constant, 1366. We're not sure what our height is because we need to check what it looks like with this here. So if you come here and then we just move this a bit is slightly just above this standard long range here. So that looks like what we have for our height if you look at it, slightly just above it. So we have that, and then the next thing that I want to do is we want to create a dark version of our nav that we have, right? We want to create a dark version of this now so that it can show on this white background. This is very easy because everything is there already. I'll just change this from FFF, from white, to a black selected color. Um, let's just use that as a black selected color. But because the Tesla logo is an image, we have to change that image. So I can just go here and go to images, and I'll choose an image, go into the Tesla logo, and pick the black one. And that just changes that. Easy, right? So that goes up into this board. Just stick that up like that. What we need to do now is to bring in the cars that we have at the nav here. Let's start with the blue car, the one in the middle. So I'm going to go into my menu and I would bring in the blue car. Get that big. For the size of the car, yeah, the car is literally covering the entire thing. So for the size of the car, it looks very small. Let's try 200. Um, this, this looks— yeah, I think I'm gonna make it 180. So make that 180 and I'll move it down just a little bit. Let me gauge, like, uh, yeah, like I said, the goal is not to make it the exact same thing, so I'm gonna stop obsessing over the details. So I'll go in And I'll type in my Model Y, change that text to black. I've been writing something there, but because it's not black, you can't see it. I'll change that to black. And if you look at the Model Y text, it's just a little bit bigger than the vehicles text here. So I'm going to increase that a little bit. I think that should be like 13 or even 14, honestly. Yeah, so I have that. And then I also have Learn and Order small buttons. So I'll type in those buttons. Learn. That Learn text, it looks like a really small text, like a 10. That's what it looks like. And it's a regular text. And then I'll pick in the underline here, right? I'll just put the underline there. And then I'll also write order. Order. So we have learn, we have order. The text looks a lot fainter, so I'll just go for fainter text. Yeah, that feels more like it. I'll put this in a flex layout just so things are organized, and then I'll make sure that this is also in its own flex layout. I'll center it, so that's at the center now. And then with my car, I'll center that as well. So that feels like it represents what we have here already. When you look at the Model Y here, the text here, there's a little bit of kerning in between. There's a little bit of spacing in between, which I don't have here. So I'm going to introduce just some spacing into that. Maybe just making it 0 will be fine, or even 0.2. Yeah, I think that's great. I'll reduce this to 13. So this looks good. Um, this looks like something that I can use for the templates for the other 2 cars. So I'm just gonna pick this and I'll copy. On the side, and then I'll also copy on this side. To copy, I'm just holding Shift and Alt, and then I'm dragging just to make it easier. Um, so now I have this. What I'm just going to do now is to go into the image itself and go and change that image and choose the red car for this one. And I'll do the same thing for this as well. I'll go into image and I'll choose the Tesla for that. Yeah, so this looks good. If I look at it from the actual website, the Tesla looks like it's sitting between energy charging and discover, and then the tail of the Tesla is just between discover and shop. And from what I have here, that looks about the same. I just need to move this a bit, maybe a couple of pixels down here, and that would be the same. And then if I go back as well, the Model 3 looks like there's some spacing. Yeah, I'll just move the Model 3 a bit here. So we, we have that now. Now at the top here, you can also see that there's a small background under the vehicles that shows that the vehicles tab is selected. And if you remember, I put this in a flex layout so that I can add that background when it's time. So that was why I put that in the flex layout. So I'm going to add that background now. I did increase the padding on these. If you remember, what I did initially was 2, I think, but I've increased the padding now just so that the selected state for the vehicle, or the vehicle menu, can actually look close to what we have in the actual design. So I'm going to come here and I'll change this to— actually, I should be changing the fill, not the text itself. So I'll come here and I'll pick the fill and I'll change that to like gray. That looks very close to what we have there. Yeah, that's about it. That's what we have there. So now we're done with this. What we just need to do is to add this menu on the side, the one that has test drive, trading, pre-configured vehicles, and the likes. And I'm just going to breeze through that because, you know, I believe that that's something that we should be able to do as we're following along. So I'm just going to add this line here. Once I've added the line I'll change that to 1 so the line is thinner. All right, so I've just breezed through that. We have all of the side menu put in now. So we're just going to add that to our original page. We're just going to place that on top. But before we do that, all we just need to do is to duplicate this. Actually, I'd like to do it on this one, so we'll duplicate this. And then we add that in and we just take it all the way up. Yeah, I do feel like the Tesla logo on this is bigger than the one that we have here, and that's weird. So I'll just adjust that. It looks like the size for this one is 140. The size for this one is 148 as well. I'm wondering why that is. I wonder why it looks bigger. That's 148, 148. That's weird. I think that's because of the Yeah, I think that's because of the PNG versions that I picked. So I'm sure that if I go and choose image and I pick another one, maybe if I pick this one. Yes, that's it. So it's— yeah, this is better. So I'll put that on there. I'm just trying to make sure that it perfectly aligns with what we have here, and it's not doing that. Yeah, I must say that the performance on PenPods, yeah, sometimes it gets like really laggy when I'm trying to like drag things it just doesn't respond properly. So I think, yeah, it's not a bad tool, but I think they really need to fix their performance if they want to compete. All right, so I have that here now. I have that here now. And if you look at this at the bottom here, for when you switch to the other one, Here it looks blurred at the bottom. The car is blurred and the text is blurred, so we're just going to add that blur effect too really quickly. And we do that same thing on the car as well. We add that blur effect as well. So we're good. We have our white car, we have the red car, and then we have the nav. So let's work on the prototyping. That's the next thing we are doing. Before we do that, I'd like to name this board so that it's easier for me to find things. So I'll name this white car, red car, and I'll name this detailed nav. Yeah, I got that. So what I'm going to do now is I'm going to for the prototype, I'm going to click this and then I'll go to prototype and I would connect this one to this and I also connect this one back to this so that it can go back and forth between each of them. And if I click the play button now and I click it, you can see that it's changing, but it doesn't have like that subtle feel that this one has. Right? It has like this smooth transition from the white car to the red car. Let's try to see if we can achieve that on our design here. So I'm just going to come here and I'm going to pick this connector. I'll come to On Click here and I want to navigate to the red car. So that's done already. Now I want the animation to be Dissolve so that it just dissolves slowly into it. And then I want it to be, um, ease in and out. And I'm also going to increase the time here. It's saying 300 milliseconds, so I'm going to increase that to about maybe 1200. That is 1 second and 200 milliseconds. So if I play that now, let's see what it looks like. So if I go Yeah, I, I think, yeah, it can still be a lot more smoother than that. So I'm going to change this ease in and ease out to just ease, and I'll change the time as well to 1500. So let's see what that looks like now. Still the same thing. Let's try another one. Let's try the ease-in for that. And then let's try the dissolve ease-in for this as well. 1500. And it's probably working. Maybe I just didn't refresh. Yeah, I think that's what happened. I didn't refresh it, so that's why I didn't see those changes. But yeah, you can see that it is a lot smoother, the transition, although it feels like it has like this black background that is happening. So let me try the easing out and let me try to change the time to 1200, and then I'm going to try to refresh this as well so it refreshes. Yeah. Yeah, difference is not a lot. Yeah, so I'll do that on this other one as well. I'll do that on this, easing out, and I'll change it to 1200. So when you look at it and you refresh it Yeah, I feel like that feels a lot like what we have here. It feels a lot like what we have here. So this is the actual thing from the website, and this is the thing from our prototype. Our prototype one feels a little bit faster, but yeah, I think it's good enough to move on. The next thing we are going to do is to see how this navbar animation works, the expanded navbar animation. Works. So that's what we're going to do next. So this has been designed already. What we just need to do is to connect this top navbar here to this screen here. So I'm going to pick the, um, menu here and I'm going to connect it to this. Actually, be careful of not connecting it to any other kind of board. Connect it to detailed nav. And if you want to check, just make sure that it shows that here is saying, um, destination should be detailed nav and your trigger should be mouse enter because you want to come up when you hover, not when you click. When you wanted to click, your trigger would be on click, but when you want it to just hover, your trigger would be mouse enter. So when you do that, this is definitely going to come up, although I'm not exactly excited about the kind of animation because it's just very sudden. It just, it just jumps at me. It doesn't look like this where it is just like smooth slides out and then it has like the cars even bounce out as well. But it looks like that is difficult to achieve in Penpot because Penpot doesn't have Smart Animate, something that Figma actually have. Smart Animate is what makes the animation to be smooth so that you can achieve something like that. But something that can definitely be done is to actually mirror this animation that actually shows the cars coming one after the other, even though it might not be as smooth. So let's try to make that work. So what we're going to do is again, we're going to copy these, um, designs. We're going to copy this page and these screens. We're going to create 3 copies of the screens because we want to create one copy for each time the car bounces into the page. So the first one is going to be for one car, so we'll delete these 2 cars here. The second one is going to be for 2 cars, so we'll delete the Cybertruck. And then the third one is going to be for all 3 cars. So we already have the animation for this to come into— we already have the animation for this to show the entire thing, but when it shows, it's going to show one car. But what we want to do now is to create an animation between this screen to this screen, also making sure that that is actually connecting to the detailed nav as well. It's connecting to the main board. So this is going to be detailed nav 2, and this is going to be detailed nav 3. So make sure that when you're connecting it, you're connecting this entire thing. The entire detailed nav 1 is being connected to detailed nav 2, and the entire detailed nav 2 is being connected to detailed nav 3 like that. Once that is done, let me be sure that we still have our connection here. This disconnected. So I'm going to connect that back. I don't know why it disconnected, but as you can see, it's not connected to detail, the entire thing. So I have to move it center here. So I have to change this, go back again and make this animation on mouse enter. It should navigate to detailed nav, right? But it's going to navigate to the one that has the one car. So I'm going to introduce an after delay animation to this. So what I'm telling it that after this one card comes on, I want the second card to come on after a delay. So I'm going to pick this line here that goes from this screen, this, um, screen to this screen to say after delay of about 250 milliseconds, navigate to detailed nav 2. And I'll do the same thing for this as well. After delay of about— after delay of about 250 milliseconds, navigate to detailed nav 3. So what that means is that it's going to navigate to this screen first to show one car. After 250 milliseconds, the second car would come. After 250 milliseconds, The third car will come. So here's what everything looks like in one go. This is the actual project that I'm clicking through right now. I click through this, I go into vehicle, and then everything comes up. Yeah, I wish we could actually achieve this kind of smooth animation that we have here where it's just really smooth and the cars bounce along. Um, but we can't achieve that on Penpot because Penpot doesn't have smart animate, which makes things a lot more smoother. And we can definitely do that in Figma. I mean, it might not be as close as this, but it's going to be a better and smoother transition than we have on Penpot. That'll be all for this video. I hope that was helpful in helping you understand how to design a landing page in Penpot. If you'd like to see the exact same tutorial but in Figma with smoother interactions and transitions, comment Figma in the comment section and I'll be sure to line up the video for you. If you enjoyed watching this video and you've learned anything at all, don't forget to hit the like button and subscribe to my channel for more videos like this. I'll see you in the next one.