Track 1: [00:00:00]

[00:00:00] Intro

Track 1: welcome on the previous video, we created a navigation bar for our company website will be for a software as a service website using a free template theme from the Quo repo project. And on this video we'll continue to build our areas of the website. Let's get started with the Hero section for the Home page.

​

[00:00:25] Design step on Figma

Track 1: So first I'm going to, Direct my attention to the Figma on which I am managing the design for the website, and I will jump towards this area over here. Let's focus our attention on this area. Let just increment the size for this page and get everything towards the bottom. Now. Also, copy and paste this over here.

and clean up a little bit, my interface. Perfect. [00:01:00] So what I'm having here is a template, a theme for me to build my, uh, hero section. And I'll get started with some demo content over here and by polishing a little bit, uh, of this interface. First, I want this button to be bluish like that. I don't want to use this arrow, so I'm going to delay that.

And also I'm going to use the Comme font, by the way, I'm sorry, I just used another computer for the second video, so I have not installed this one. Comme font, Google Font. Let me very quickly install this font. I just want those videos be organic. I don't wanna fake them. So yes, that, that's it. I previously used another computer.

On which I installed this font and now I am using another [00:02:00] one here. So here we are. Install, I believe it is installed already. Let me close this window. Let me refresh this other window here in And yeah,

it looks like there we are. Perfect. We have the font. I'm sorry for those two minutes. Okay. Back to truck. I'm going to change those fonts to Comme. There are duplicate font here, by the way, so Comme, Comme, and Comme. Okay, perfect. So next thing that I will do is to standardize the size for my fonts. I will change this and tweak this a little bit.

So for my butt on, I'm going to pre probably as in 20 as well.

Something like that Will do perhaps[00:03:00]

Oopsy. Okay. Okay. I am not that sure about, isn't this little thing at the bottom? Mm. I don't know. I will think about it. . Yeah, I, I believe I, I wanted to be using this one over here and that to be necessary at this stage of my fake company. So let's assume that my call to action will be, my main call to action will be to contact, uh, is to, to.

to allow people to contact me for a demo, um, which will make, will be making sense for this state of a sound, uh, SaaS company. So let me change this to be great and let's change this to have this Lee ai. Alright, so this is all demo content. I won't [00:04:00] butter myself in. , uh, creating or writing actual copy for, for this, uh, demo.

And similarly, I will not be bothering myself into creating, I mean, I, I don't even have any interface for this, um, fake application. So for the sake of moving forward faster, I will just reuse this by only tweaking. a little bit. The colors here and there. Maybe I can change some pictures because my idea, and this is not only about this specific demo.

My idea, my overall idea is that you can go fast, you can go quickly when creating this website so that you have. You already have by the end of this series of videos, is structured that you can use, uh, to populate this with actual content with better content. Maybe you can, uh, have [00:05:00] a someone to, to, to work on the interface.

Maybe, maybe you already have the interface for the actual application, uh, the AI application for that that you're promoting. And then you can take those pictures over there. Maybe that is the situation. But anyways, this is. Like this is not about creating the application contently. This is about creating the website for the application contently, and therefore this will just suffice as for now.

Perfect. What else do we have here? Es Semial Maybe I will use, I believe that I will use another upon here. So let me go to Google font

and search for. . Mm. I will just search for one font that I can use for the headlines. Specifically, I want this odor font to be somehow different. So I'll use memory weather perhaps. [00:06:00] So let me get this font installed on my computer so that I can use it on Figma, just like this. Double click install. Install, install vault date.

and I've looked at, I am done here. And now let's go to Figma again. Change this to Merry weather. Perfect. Maybe regular make light. I like it. Light. So there we are. For this one I'm going to use medium. Yeah, I believe that's, that's it. That will do for what I require. Maybe I am. Pretty bar, and I wanted to do this to this picture over here.

[00:06:49] Webflow step

Track 1: That's it. Okay, so I already have my Heroes section designed on Figma and what's next? I'm going to update this on [00:07:00] Webflow. So, because I have heard previously what this theme grid, great ethos or gify. , then I can go to the template, the theme on Webflow, and select this zero section, copi it, and paste it into my project on which I have already built a navigation bar on the previous video.

So let's do that. Go to Webflow and open the theme or the template for a great iffy. and select the hero section. Remember the way we have built those sections for the theme, uh, we have identified its section with a three charters ID at the beginning of each of the classes with an H section. And this case, this is g a y, so I'm going to go to the Ruth section and hit command C or accountable C on your [00:08:00] computer.

And then jump to the tab with your own project. Click on the body and hit on your keyboard. Command V or control V. So that's it. There you have it. This is the structure in which you will get cert for updated things. So what's next? I am going to ref. I I'm going to refer to my Figma and I'm going to update things in there.

So let's start with the picture. I'm going to export this picture from Figma. And here we are. I believe that I will use a J pack. So let me export this picture as a JP pack. I'll have the temporarily on my, uh, dashboard and I will then update this picture onto my Webflow project. There we are. So there we are.

Perfect. Now what I'm going to do is, um, [00:09:00] um, I'm going to update this heading over here.

I am going to update this hand over here with this font. Perfect. Mayor, we. So I'm going to select this heading, g a y dash head and dash one. Then I'm going to jump to

the typography area and add a front. So on Disney window that opened, I'm going to brow through the tabs and focus on the font tab. Then I will search the merry weather font over here. Let's see. Mary, Mary. Mary,

Mary, weather[00:10:00]

me, met Lauren in Merry Weather. I'm thinking this is not one that I needed. Let me, let me just add it anyways. Merriweather and this me ward weather alone. Okay, let's refresh the page status two, see if it is available now,

and let's see. Merriweather, it was already there, so that's why I, I didn't find that. So let's have Merriweather in light like this then. I can close this, then I can go here and use this comma and update the color this comma paragraph now, and update the color for this one. [00:11:00] There we are almost, let's create a swatch with this Kohler.

We'll get rid from this link over here. I will increment the size for this bottom by incrementing the internal pattern at the top and at the bottom, also at at two sides of it. Then I will delete the arrow. I won't use this arrow, so I can click on this text dash two item. And the light, the image ingredients, and also the internal right hand side padding.

That's it. And finally, let's update the color for this button over here to blue. Also, I think you want to have a little bit more of room or empty space in between the, the left and the right, right side of this, uh, [00:12:00] interface over here. So I will hit on. This G a y dash wrap dash one element. Go to the right hand side of which I'm having the properties per for all visuals, and I'm, I'm having this display thing over here.

What I will do is to increment the gap between those two elements. So I'll select gap for columns and then write two em, so maybe three. Look through. I believe that three will do what else we have here. Okay. Okay. There's another one. I want this font element over here, this paragraph and this, uh, button to have the same size for the font.

So I'm selecting the paragraph. I would like, I would make this a tad smaller perhaps, or No, that's, that's fine. I rather. [00:13:00] Create, make, make this button to be larger so it'll hit the tax dash two element and change this type size priority from 1.2 to 1.5. What else we have here?

Okay. Okay. Okay. , maybe I'm going to increment also the g a y dash rap dash three, um, layout gap row. Um, distance from two to three. We're going to four paragraphs. No, the four is way too much. So just three. If we'll do. and the final, I'm going to select my paragraph and I'm go, and then I'm going to delete this margin over here.

So that's it. I believe that, [00:14:00] I believe those elements should be smaller. So yes, I, I'll make all those smaller and I'm selecting the paragraph, reducing this to 1.3. So I am with this button, 1.3. And so I am with this packs over here to five perhaps,

maybe something like that. Okay,

so that's it. Here's my desktop version of this hero section, and. Now that I have it, I'm going to be working on the tablet, mobile landscape, and mobile portrait versions of it. So let's go for tablets and tablets. [00:15:00] This is almost, or I would say this is pretty much okay for what I require.

So maybe I will reduce a little bit decisive for this, uh, right hand side of the, of the hero section. I can do that by selecting, uh, the element g a y dash wrap dash two, and then on the flex child sizing. In basis, I'm going to change. 44%, two, perhaps 30.

I mean, now it doesn't even, uh, do anything that's like the most, it can be reduced safely as we have it. So I would, I would rather reduce a little bit depending or the gap in between these two, these two columns. [00:16:00] So I'm selecting the g a y dash rep dash one element. Then I'm going to lay out gap and I'm reducing two em, uh, four ams to two EMS for columns.

Um, yeah, it, it looks like that is the most that we can do over here. So let's live it. Acids. Maybe I can reduce a little bit the size of this heading section. So I'm reason this from, uh, this g a y dash heading dash one. Heading from 5.3 EMS to four Oh, that, that was, that was a lot. Maybe I am also reducing the size of those elements.

The, the space in between those elements for ga y dash wrap dash three from gap three to gap two, and that's it. Like that is the most that I feel comfortable in red reducing the [00:17:00] size for those elements. You know, as for mobile landscape, it is pretty much done. I, I don't think that I'm required to do anything else here.

And by the way, it is also a possibility for us to follow this approach that we're having for mobile on tablets. It is entirely possible for us to, to do that. In this case, I believe this is, this is working

[00:17:28] Conclusion and what's next

Track 1: So that's it. That is how you create a hero section for this, uh, homepage for a SaaS company.

Using the resources from the quad repo project, um, links for using those resources are on the description. Check the previous video to see how is that. We got all this started with the navigation bar and that's it. Thank you.

​[00:18:00]