00:00:02 And finally, we are ready to dive right into our footer, which is more than just the footer.

00:00:07 It is also a contact page.

00:00:09 So back within our application, head over into the components folder and create a new file and call it contact.jsx.

00:00:19 Within it, run RAFCE.

00:00:22 and let's just import it within the app.jsx by importing the contact section.

00:00:28 If you do that, we can get started by creating it right away.

00:00:31 I'll use a semantic HTML5 footer tag and give it an ID of contact so we can very easily scroll to it.

00:00:40 Right within it, I will display an image that has a source equal to, and once again, we're dealing with some leaves, so I'll say images,

00:00:49 footer right leaf dot png, with an alt tag of leaf right, and I'll also render an ID of f right leaf, which we'll use to animate it very soon.

00:01:05 I'll duplicate it and change this over to a left leaf in all three instances.

00:01:11 And right below it, we can render a div with a class name equal to content.

00:01:19 And within the content, we can render an h2.

00:01:22 That'll say where to find us.

00:01:25 Now if you save this and scroll to the bottom, you can see the where to find us section.

00:01:31 Now I'll collapse this just so we can see it right here.

00:01:34 And it looks like the left leaf didn't render properly because I misspelled left.

00:01:38 So let's fix it in all three places.

00:01:42 And now you can see both the left and the top leaves.

00:01:45 Now below this H2, let's render a div and within it, let's say H3, visit our store.

00:01:55 Or here we can say bar.

00:01:58 Then below it, a p tag where we can render an address.

00:02:01 I'll head back to the design so I can copy this random address in the US.

00:02:07 Below it, we can render another div that'll say H3 of contact us.

00:02:15 And then we can also paste the phone number, which I will copy within a P tag, as well as the email address, which will be right within another P tag.

00:02:27 Finally, I'll render another div that'll have an H3.

00:02:32 that says open every day and then below it we can map over the opening hours dot map where we get each individual time and for each of these times we can

00:02:47 automatically return a p tag that'll have a key equal to time dot day and within it we can render the time dot day colon,

00:02:57 and then time.time.

00:02:59 So we render both the day and the time.

00:03:01 So if we head back, now we can see visit our bar, contact us, and open every day.

00:03:07 We can head below this div and render one last div for our socials.

00:03:13 So I'll render H3 and say socials.

00:03:17 And within it, I will render another div with a class name equal to flex-center and a gap of five.

00:03:26 And we will map over the socials right here.

00:03:30 which are coming from the constants, so make sure to import them.

00:03:34 And for each one of our socials, we will automatically return an anchor tag, so we can actually visit it.

00:03:43 That'll render the image with a source of social.icon.

00:03:48 So if I save it, you can see three different icons.

00:03:51 And now we can style them a bit by giving it a key of social.name.

00:03:57 an href of social.url so we can point to it a target of underscore blank so it opens up in a new page and with it we have to provide a rel of no opener

00:04:10 no refer just like this and finally an area label for screen readers of social.name so we know what we're clicking on.

00:04:20 So now you can see that we have this footer section.

00:04:23 If I expand it just a bit, you'll see that it looks even better.

00:04:26 We now have those two leaves on the left and the right sides.

00:04:30 And of course we are ready to apply a couple of animations.

00:04:34 I'll collapse our code just a bit, just so we can see the entire part of the footer.

00:04:38 And I'll hit right at the top of this contact section where I will use the use gsub hook.

00:04:46 And we will run it just at the start.

00:04:48 Within it, we want to split this title into multiple words by using the split text plugin.

00:04:55 So I'll say const title split is equal to split text, which we have to import at the top by saying import split text coming from gsap all.

00:05:08 And don't forget to import the gsap library itself by saying import gsap from gsap.

00:05:14 On the split text, we can call splitText.create and we pass what we want to split.

00:05:20 So that's the H2 within the context section.

00:05:23 And we want to split it into a type of words.

00:05:27 Now that we've split it, we can create a timeline and tie it to the scroll position.

00:05:32 So say timeline is equal to gsab.timeline based on the scroll trigger.

00:05:39 And the trigger will actually be once we reach the contact section.

00:05:43 So the start will be once the top of the contact section reaches the center of the screen.

00:05:48 And we can also define the easing.

00:05:51 So that's going to look like this.

00:05:53 Ease of power 1 dot in out.

00:05:57 And that's our timeline.

00:05:58 So now we can focus on actually animating different elements within that timeline.

00:06:04 Specifically, we can focus on animating each word in the title right here.

00:06:08 So I'll say timeline dot from.

00:06:11 We want to take the title split dot words.

00:06:17 and animate it from the opacity of 0, from the Y% of 100, which is outside of the screen, and with a stagger of 0.02. If you apply this and reload,

00:06:31 nothing will happen yet.

00:06:33 That's because I said Word right here instead of Words.

00:06:36 So if you fix it and reload, you can see that it slowly starts coming up and down.

00:06:40 We'll see it better once we go to full screen.

00:06:43 But for now, let's focus on the other animations as well.

00:06:47 So I'll just chain another .from to this timeline, this time focusing on the contact h3, as well as the contact in the p tag.

00:06:59 And I'll do the same thing.

00:07:00 Opacity 0, Y% and Stagger.

00:07:04 And finally, we want to animate the leaves.

00:07:06 So I'll say dot 2. We want to go to hash F, right leaf.

00:07:11 Move it over by 50 pixels in the top direction throughout the iteration of 1 second.

00:07:19 And with an ease of power 1, dot in out.

00:07:26 And we can now duplicate this over for the F, as in footer, left leaf.

00:07:32 So if I save this, you'll see that now on scroll, those leaves move, but it'll be much easier to see it if we check out the full screen.

00:07:41 Scroll all the way to the top and reload, and now nicely scroll to see our footer section.

00:07:47 Let's go through the art, through the menu, and finally check this out.

00:07:52 Where to find us.

00:07:53 Everything nicely falls into the place.

00:07:56 Although this leaf is not moving, that is the right leaf.

00:08:01 So let's see, F right leaf.

00:08:04 How do we call it right here?

00:08:07 F right leaf, that is looking good to me.

00:08:09 Oh, it looks like it does move, but a bit later once everything else moves.

00:08:13 So there's one trick that we can do, and that is to this timeline right after this dot two animation.

00:08:20 So after we close this left leaf thing.

00:08:23 We can then add this little character that says Before.

00:08:29 What this means is that the element with id fRightLeaf moves up by 50 pixels, and at the same time, the element with id of fLeftLeaf moves down by 50 pixels.

00:08:41 So they move together.

00:08:43 So now, as I scroll, you can see that this leaf right here just moved.

00:08:48 And if I reload and check it out on mobile, see how all of the elements of the footer nicely load.

00:08:54 But in this case, there isn't enough space to show the right leaf here as well, so I just hide it.

00:09:00 And that is it for the footer or the contact section.

00:09:03 So what I'll do is close the files, open up my terminal and run git add dot git commit-m implement contact section, and then git push.

00:09:17 So now the full application has been pushed over to GitHub.

00:09:20 This has been such an amazing project, but now is where the real learning begins.

00:09:26 Sure, we have implemented a couple of animations across all the different sections, but I need you to fully understand how G-SAP truly works behind the scenes,

00:09:36 and I want you to be able to implement these complex animations on your own in your future applications that you will be working on,

00:09:43 not just replicating what we did together in this course.

00:09:47 Of course, building this project already gave you a nice foundation to build your GSAP skills on top of, but now we're going to dive into the ultimate

00:09:57 GSAP course, where we're going to dive deep into every single little GSAP property so that you truly understand how it works behind the scenes.

00:10:06 Once again, congratulations on coming to the end of this course and developing this project, but now is where the real journey begins.

00:10:15 Enjoy, and congrats.