00:00:02 Let's get started working on the About section of our Cocktails page.

00:00:07 In this one, we'll have a little title right here saying that we pay attention to every detail, and then say a bit more about how we serve our cocktails

00:00:16 and who do we serve them to, as well as show some nice graphics of people having fun in our bar.

00:00:22 And of course, this will come with the great animation.

00:00:24 So first the title will animate and then after the title, we'll get all of the images one after another.

00:00:31 So we can get started working on it by creating a new component within the components folder, which I'll call about.jsx.

00:00:41 And I'll run RAFCE to quickly spin it up.

00:00:44 We can immediately import that right within our app below the cocktails.

00:00:49 So I'll say about.jsx.

00:00:51 And end it right here.

00:00:53 And as soon as you do that, we now have this new section right here below the drink.

00:00:57 So let's develop its UI by giving this div an ID of about, so we can scroll to it.

00:01:03 And within it, we can create a new div with a class name equal to margin bottom of 16. On medium devices, padding X of zero and usually padding X of five.

00:01:16 Then we can render another div right within it with a class name equal to content.

00:01:23 And then within the content, we can render another div with a class name equal to on medium devices, call span of eight.

00:01:33 So we can prepare some space for this heading text that we'll show right here.

00:01:37 And then we can render a P tag that'll have a class name equal to badge.

00:01:43 And it'll say best cocktails.

00:01:46 And below it, we'll render an H2 that'll say where every detail matters.

00:01:53 And then we can also render a span element that'll just render one dash with a class name of TextDashWhite.

00:02:01 Then let's actually space this out nicely.

00:02:04 So after the dash, still within the H2, we can say from Muddle to Garnish, which is just some cocktail jargon saying that we'll prepare everything.

00:02:13 Now we can go below this div, and we can create one more div just below it, with a class name equal to subcontent.

00:02:23 But I can already see that something is wrong here, and that is that our cocktail drink video is actually moving down.

00:02:30 Oh, no, nevermind.

00:02:31 Now it's good.

00:02:31 So let me just reload, and as I scroll now, it should kind of get stuck right here, and then we should have a clean section.

00:02:38 which allows us to focus on the subcontent.

00:02:41 So within it, I'll create a p tag, and here we want to display some text.

00:02:45 Now, the simplest way for me to get that text is right here from the design, so I will copy this part, where we say that every cocktail we serve is a reflection

00:02:55 of our obsession with detail.

00:02:57 Then, right below this p tag, we can render a div.

00:03:00 And within that div, we'll have another p tag with a class name equal to, on medium devices, text-3xl to make it very large,

00:03:11 text-xl typically, and font-bold.

00:03:15 Within it, I'll display a span element of 4.5 and then outside of it, out of 5. And then below this p tag, I'll render another smaller text.

00:03:26 So I'll give it a class name equal to text-sm, text-white100.

00:03:32 And if we have done that properly, we can enter a piece of text that says more than, and then we can type a specific number of customers.

00:03:40 Perfect.

00:03:41 Now on our current website, you should be able to see something that looks like this.

00:03:45 But of course, let's focus on the grid where we can display additional images.

00:03:51 So I'll head below a couple of divs actually.

00:03:54 One, two, three, four.

00:03:57 So we're going to exit this subcontent right here.

00:04:00 And then here we want to display another div that'll have a class name equal to top grid.

00:04:10 Within it, I'll display a div with a class name equal to, on medium devices, colspan3, with a div that'll have a class name of Noisy,

00:04:25 and it'll be self-closing, and then we can render an image.

00:04:29 that'll have a source of images, abt, so that's the about section, .png, but make sure to say abt1, because we'll have multiple,

00:04:39 with an alt tag of gridimg1.

00:04:44 Now, if you save this, you should be able to see this little image.

00:04:48 And if you remove the noisy class, it'll be in full clarity, but we do want to have this special bar type feel.

00:04:55 Now we can duplicate this div a couple of times.

00:04:59 So I'll take this div, duplicate it once and one more time.

00:05:04 And I'll space them all out nicely within this parent div that we have.

00:05:10 The top grid.

00:05:12 In the second one, I want to say call span 6, so it'll be taking more space, and I'll render the about image 2. And then for the third one,

00:05:21 I'll say call span 3, about image 5, and save it.

00:05:27 And now we can see three of these different images.

00:05:30 Now I'll create another div that'll have a class name equal to bottom grid.

00:05:37 And within it, I'll duplicate one of these divs that has the div and the image inside of it.

00:05:42 And I'll say call span 8. So this one will be long.

00:05:46 It'll render the about image 3. and just below it I'll duplicate it once again and I'll render another call span 4 with the about image 4. Why do we have 8

00:05:59 and 4? That's because the full width is 12. So in this case we have 3, 6, 3 which is 12 and here we have 8 and 4. And if we save this,

00:06:10 on mobile we show all of them one after another, but desktop is where this truly shines.

00:06:15 So as we scroll down, here you can see this new layout grid that we created.

00:06:20 But now is the time to animate it so that everything fades in naturally when the user scrolls in view.

00:06:26 And at this point, you should already have a pretty good idea of how we can make it happen.

00:06:31 Right at the top of this component, I'll use the use gsub hook by saying use gsub coming from gsub react, and I will just open up a new callback function

00:06:41 within it.

00:06:42 Then, we can start defining our different animations and timelines.

00:06:45 First, I want to split the title into words.

00:06:48 So I'll say const titleSplit is equal to splitText.create and we want to call it aboutH2.

00:06:58 So basically here we're targeting the H2 element inside the about div and we want to split it by the type of words.

00:07:07 Now don't forget to import gsap coming from gsap.

00:07:13 as well as import in curly braces split text coming from gsap all.

00:07:19 We also need to create a timeline that allows us to choose when we start with the animation.

00:07:24 So I'll say const scroll timeline is equal to gsap.timeline.

00:07:29 It'll be a scroll trigger animation.

00:07:32 and the trigger will be attached to the about element, so to the entire section, and we'll start it when the top of the about section reaches the center

00:07:41 of the screen.

00:07:42 And now we can start animating it by saying scroll timeline dot From title split dot words and we want to give to it some initial styles such as it'll

00:07:55 start from the opacity of zero It'll last for one second.

00:07:59 It'll start from the top.

00:08:01 So y percent will be a hundred We can choose the easing of the animation.

00:08:05 So we'll use the expo out and And we can choose the stagger between each different words of 0.02 so that the animation is pretty fast.

00:08:14 To this, I'll also attach another dot from.

00:08:18 This one will be concerning the top grid div as well as a bottom grid div.

00:08:26 So we're targeting both the top and bottom rows separately.

00:08:31 To both of them, I'll give the opacity of 0, duration of 1, ease of power 1 dot in out, and a stagger of 0.04. I found this value to work the best.

00:08:47 And then you can also apply a second parameter to this from which is a string of minus equal to 0.5. What this will do is it'll make the animation start

00:08:59 half a second before the previous one ends.

00:09:02 So both animations will overlap a bit which feels smoother and faster.

00:09:07 So now if we save it and if you reload Notice how each word falls into place one after another very quickly.

00:09:15 And then immediately while that is happening, we can also see the top and the bottom row kind of start coming up together.

00:09:23 It is a very subtle, very quick and seamless.

00:09:27 No flashy animations.

00:09:28 And at this point, I think you have a pretty good idea of how we're applying all of these animations.

00:09:34 So with that in mind, let's not forget to commit it by saying git add dot git commit-m, implement the about section, and git push to push it over to GitHub.

00:09:49 So that in the next section, we can focus on this amazing, pretty different art section.

00:09:56 This is going to be all about how we're creating those cocktails.

00:10:00 And we'll actually lead the user through the story of the creation through an image overlay.

00:10:05 So as they scroll, they'll be able to see the full story.

00:10:08 More on that in the next lesson.