00:00:02 Let's start with the first piece of our UI, the knob bar, the component that will set the stage for the navigation and include a smooth scroll animation

00:00:12 powered by G-SAP.

00:00:14 So create a new folder right here within the source folder and call it components.

00:00:22 Then within components, create a new file and call it navbar.jsx.

00:00:29 And within it, you can run RAFCE to quickly spin up a new navbar component.

00:00:35 Now that you've created it, head back into the app.jsx, clear this div that we have right now.

00:00:41 Instead, create a main tag, which means that this is the main part of our content.

00:00:46 And within it, just render a self-closing navbar component coming from dot slash components, forward slash navbar.

00:00:54 If you've done that properly, you should be able to see just the navbar at the top left of your browser.

00:00:58 Now, I'll put my browser side by side with my editor so we can see the changes that we make live.

00:01:03 Let's head over into that navbar, turn it into an HTML5 semantic nav tag with a div, And within this div, we can render an anchor tag that'll have an href

00:01:15 pointing to hash home.

00:01:17 So once we click on it, it'll lead us to the hero section.

00:01:21 I'll give it a class name equal to flex, items-center, and the gap of two.

00:01:27 And right within it, we can render a p tag that'll render the name of our imaginary cocktail bar.

00:01:33 For now, I'll do something like velvet pour.

00:01:38 There we go, and this will be a part of our logo.

00:01:41 I'll add the logo soon, but before that, head over below the anchor tag and create a new UL, an unordered list.

00:01:49 Within it, open up a new dynamic block of code and create an array that'll have different objects within it.

00:01:57 Each one of these objects will have a title of something like About Us, and it'll also have an ID so that we can scroll to it,

00:02:07 which will be something like About.

00:02:09 And now we can create a couple of these objects right here, each one within its own line.

00:02:15 But if you do that, you'll quickly notice that your application or your code would get pretty cluttered.

00:02:21 So instead, I like to do those within a new file called Constants.

00:02:26 So right here within the root of our application, create a new folder and call it Constants.

00:02:32 And within Constants, create a new file called index.js And within it, we can create a new const nav links and make it equal to an array where we can have

00:02:45 those multiple objects.

00:02:47 Each one having an ID of cocktails in this case.

00:02:52 as well as a title.

00:02:54 And now we can do the same thing for, for example, the about section.

00:02:58 So ID is about and title is about us.

00:03:02 Now you want to export that just so we can use it within the other file.

00:03:06 And if you head back over to our nav bar, now you can just simply say nav links.

00:03:12 Make sure to import it from ConstanceIndex.js.

00:03:17 And you can now map over each one of these links.

00:03:20 And then for each one, you can automatically return an li, a list item.

00:03:25 Now, what do I mean by automatically return?

00:03:27 I mean using parentheses right here instead of curly braces.

00:03:31 Because if you used curly braces, then you would have to add a return keyword right here.

00:03:37 But if you use just the parentheses, it'll return this automatically.

00:03:41 This li, since we're mapping over it, has to have a key, and the key will be equal to link.id because it's unique.

00:03:49 And within the li, we can render the anchor tag with an href of dynamic template string of hash, and then the link id.

00:03:59 And it'll render the link.title within it.

00:04:03 So if I save this, you can see that now it says velvet-pour, and we have cocktails and about us, which are the two links within the nav-links array.

00:04:11 Now, on top of just having the two links, we want to have more of them.

00:04:15 And just so we don't have to type all of them by hand, I actually want to provide you with the complete constants file.

00:04:21 So open up the video kit, scroll down, and there, just below the index.css, you'll also be able to find the constants index.js file.

00:04:30 copy it, and paste it right here.

00:04:33 You'll notice that alongside the nav links, which we have right here, we also have a couple of other things that we might want to render later on,

00:04:42 such as the cocktail lists, mocktail lists, profile lists, and feature lists.

00:04:48 These are all just different arrays of text that we want to display on our landing page, just so we don't have to type them by hand and put them within

00:04:57 our JSX.

00:04:58 We're keeping them in one single place so that if you maybe give this website over to a cocktail website owner, they can come into this file and just change

00:05:08 their opening hours themselves.

00:05:09 They don't necessarily have to dive right into the code and mess with the code right here.

00:05:14 Perfect.

00:05:14 Oh, and within this video kit, you can also find a Figma design.

00:05:19 So go ahead and click on it, and you'll be redirected to a Figma design that our JSM designer has prepared specifically for you completely for free,

00:05:28 where you can find the entire design of this application right here, and you can go ahead and develop it on your own if you want to,

00:05:36 or you can follow along with this course.

00:05:38 One thing that you'll notice right here is that this website has a lot of assets.

00:05:43 starting with the small ones, such as this logo right here next to the velvet pore, which is the title of the company on the top left,

00:05:49 also these leaves, maybe this primary video that we want to animate, as well as some other leaves and more photos that we want to display of just people

00:06:01 having a good time and enjoying our cocktails.

00:06:04 So, in order to be able to get all of these assets, you could go ahead and explore the design, click on it multiple times until you get to the actual image,

00:06:14 and then you can just export it as a PNG, JPEG, or something else.

00:06:18 That's totally okay.

00:06:19 But these assets have long names and it's easy to get lost into all of this naming and it will take some time.

00:06:26 So I took some of my time to save the time for you.

00:06:29 And I collected all of these assets into a single zip folder that I shared within Google Drive.

00:06:34 Once again, the link will be down below the lesson or within the video kit.

00:06:38 So just go ahead and download it.

00:06:40 Once you do that, unzip it.

00:06:42 and you'll see that in there you have a couple of different folders.

00:06:45 Just take this public folder and drag and drop it right within your source folder.

00:06:50 Once you do that, you'll be able to see the different fonts that we're using, as well as some images that we'll use later on within our application.

00:06:57 So if you head back over to the navbar, right within our p tag, where we have our text, we can also render an IMG with a source of forward slash images,

00:07:10 forward slash logo.png and we can render an alt tag of logo.

00:07:15 If you do that, you'll notice that you can't access your logo just yet.

00:07:19 That's because in Veed applications, the public folder should be within the root of the application, not within the source folder.

00:07:25 So just delete the default one that is already over there.

00:07:28 And then move this new one into the root of your application.

00:07:32 As soon as you do that, you'll see an error.

00:07:34 So head over into your app terminal, stop it from running, and then rerun it again by running npm run dev.

00:07:40 As soon as you do that, your assets will be taken into account.

00:07:44 And now you should be able to see a little logo right here on the top, right?

00:07:48 And not just a broken image.

00:07:51 Also, you can head over into your index.html and instead of saying Vite SVG, you can say images logo.png so that your favicon gets updated as well.

00:08:03 And there you have it.

00:08:04 This is our navbar.

00:08:06 If you expand it, you can see that it looks great on desktop devices as well.

00:08:10 But now what we have to do is that when you scroll, we actually want to apply this glassy background so that when the text goes over some other text,

00:08:19 it is still fully visible and not interrupting our viewing experience.

00:08:24 Of course, we won't be able to test it just yet because we cannot scroll as there is no other content, but I can show you how we can implement it.

00:08:32 And this is actually going to be the first time we're going to use GSAP in this application.

00:08:36 Right at the top of our component, I'll say use GSAP.

00:08:41 And you can import this from add GSAP react.

00:08:44 This is a helper hook that allows us to very easily use GSAP within our application.

00:08:49 You can define a callback function right within it.

00:08:51 And then you can define a timeline by saying const nav tween.

00:08:57 Now, why did I call it a tween?

00:08:59 Well, tweening in animation is short for in-betweening, and it's the process of generating images that go between different keyframes.

00:09:07 That's a very technical explanation, but it'll start making more sense as we start implementing it.

00:09:12 And of course, if you want to truly understand how it works behind the scenes, then go ahead and check out our GSAP course,

00:09:18 linked down below.

00:09:19 But for now, I'll also get access to the original GSAP library by importing GSAP from GSAP.

00:09:26 And then I'll say dot timeline.

00:09:28 So we're starting to build a GSAP timeline that will be based off of a scroll trigger.

00:09:34 And the trigger will be the nav.

00:09:37 Specifically, we'll start it from the bottom to the top.

00:09:42 What does this mean?

00:09:43 Well, these two properties control when the scroll animation starts and ends.

00:09:49 And the first part is referring to the element's position, so the position of the nav, and the second one is referring to the viewport position.

00:09:57 In this case, when the bottom of the nav bar reaches the top of the viewport, that's when we actually start applying a specific class.

00:10:07 So now that we know when the animation will start applying, we can say what will happen.

00:10:13 So I will say navTween.fromTo, and this fromTo is a method that ensures that the nav always starts from a known style, which is going to be transparent,

00:10:26 and it ends with a specific effect.

00:10:28 So the first parameter is the target that we want to animate.

00:10:32 Then we have the duration.

00:10:34 Then we have the from variables, the to variables and the position.

00:10:38 So I'll say nav.

00:10:40 Then I'll say that we start with a background color set to transparent.

00:10:46 And then I will say how it will end.

00:10:49 We want to end it with a background color.

00:10:52 of hash 0 0 0 0 0 0 which is black but I'll also end it with 50 which in hexadecimal is 30% so it'll have the opacity of 30%. I'll also give it a background

00:11:09 filter which will be set to blur 10 pixels and finally I'll give it a duration of 1 second.

00:11:18 And you can also choose the ease, which I'll set to power1.inout, which is how that animation will actually play out.

00:11:26 This will create a smooth animation.

00:11:28 Now, it looks like I didn't properly close this background color, but as soon as I do that, you can see that it's no longer complaining,

00:11:35 and now it's pretty clear what's happening.

00:11:36 So later on, once we add additional sections, And when we allow the user to scroll down, as the bottom of the navbar reaches the top of the viewport,

00:11:46 that's when it'll actually turn from a transparent background to a dark, blurry background that allow us to read the text,

00:11:53 even though it's showing on top of the other elements.

00:11:56 Great.

00:11:56 So now that we have the navbar, let's move over to the most important part of this course, and most likely the reason why I clicked on this course in the

00:12:04 first place, and that is the hero section with this sick animation where the ice cube falls into the cocktail and animates as we continue down the screen.