2.6 Customers Page

Hello and welcome to lesson number 7 of this course where we gonna build the customers page for our let's call it corporate website. Previously we create it the pricing page which you can see right here. So, let's go ahead and start by duplicating this artwork and we're gonna call it customers. And we have to delete a couple of things, and then we'll update this heading. We'll say TimeTracker is loved by our customers, or our customers love TimeTracker. All right, so let's move this down a little bit. 30 pixels of distance there and let's take a look at the structure. So our customers, we have of course the Hero, and the CTA, which is already here, but, the main content, is basically a list with customers. And each customer gets an image, name, small description, and an optional testimonial. So, let's take a look at the UI kit here, and see if we can find something that we can use. So, one option would be to use this layout from teams. Let's see what else we can find. Basically, we're looking for a layout that allows us to list content or to display content as a list. Well, this is one layout that could work. So we have basically the customers with their logo and the small description here. What we're missing is the actual customer name. But because we have their logos, this is actually optional. So yeah, number seven. Let's keep that in mind and let's see if we can find something else. We can also do something like this. Well this is also interesting. So actually what I'm gonna do is simply copy this section, and I'm just gonna paste that in. I'll see what kind of spacing we used here, 19 pixels. And most I'm gonna get this section and I'm gonna paste it here. And then we'll decide which one looks the best. Okay, this is a blog so we and I don't think we'll find anything there that would help us. And this is also an interesting approach. It might work, I'll see what else. This is too simple. We also have this option, so let's actually copy this as well. I need to make this bigger. And that's about it all right. So let's pick one from these three options right here. The idea is to find one that fits really nicely and gives us everything we need, and I think this one is actually our best bet. Because it gives us the kind of structure that we're looking for. So we have the logo of the customer and then a little description. So we're gonna use that but we're gonna change it up a little bit because we also need to use these elements in our page. What I'm gonna do is basically copy this text and I'm gonna place it right here. I'm gonna say companies that have entrusted their time management to time tracker. And I'm gonna delete this title. And I just wanna make sure that I'm keeping the correct spacing here. So, let's say 166, should be about 140 to the top, something like this and then resize this. So we enter of way the same padding that we have before, so now I'm gonna move this up. And we need a way to separate this section on the top. Basically our hero, or our header, from the actual contents. And, let's see what we view so far. Well we have different elements, so far, so let's draw some inspiration from these pages to see how they're separating each section. I guess we'll keep the use as separator, like they do here in the footer. Let's see what else. Yeah, I think the separator idea is the best, so I'm just gonna copy this one. And I'm gonna go right here, paste that. And I'm gonna bring it above everything else, so it's actually visible, and let's see. Let's place this at, what was it 90 pixels, okay? So 90 pixels from my content, there we go. And it should be right in line with where this other section starts. All right, so that looks pretty good, there is a separation. Between our header and the actual content. The rest of the elements are exactly where they should be. So right now let's just reduce the size of our arc board. Let's see how many pixels there are left here. 183, so an easy way to do this is go to the height with the Artboard selected, and say, -183, and that's gonna resize to those precise measurements. And that is the Customers page. All right, so next up in line is the documentation page. So we're gonna tackle that in the next lesson, see you there.