![image.png](https://ipfs.busy.org/ipfs/QmTMhCQjFTCaKDuP9Da59Ncv5Q4BbvHnqjXjvnu4JeCBnE)

#### Repository
https://github.com/mcfarhat/actifit-landingpage
#### Pull Request
https://github.com/mcfarhat/actifit-landingpage/pull/1

#### About the project:
https://steemit.com/actifit/@actifit/announcing-actifit-innovative-smt-for-rewarding-fitness-activity

https://actifit.io/

# Update

As promised in the previous post, here's the next update for the Actifit landingpage. The changes mainly contain a menu bar and more content.

### Animated Numbers

- https://github.com/mcfarhat/actifit-landingpage/pull/1/commits/607c4188d10110e7b27c7812555b701785bbed7c
- https://github.com/mcfarhat/actifit-landingpage/pull/1/commits/dc5cc62092db4d7e501152d48a9bb9c61c1f59ca

To make the page a bit more alive, I added an animation to the numbers shown in the first section.

<center>
![actifit-numbers.gif](https://ipfs.busy.org/ipfs/QmfK9EAkKc3zeXGGvpwyBwRuZpL18EE1ohTYhAte1risLU)
</center>


#### Implementation

For the animation I use [TweenMax](https://greensock.com/tweenmax) from the [Gsap animation library](https://greensock.com/gsap). After [separating the data into multiple component data properties](https://github.com/mcfarhat/actifit-landingpage/pull/1/commits/607c4188d10110e7b27c7812555b701785bbed7c#diff-b19fa22add3de9cd0b98b05366479d92R179) I added some [computed properties](https://github.com/mcfarhat/actifit-landingpage/pull/1/commits/607c4188d10110e7b27c7812555b701785bbed7c#diff-b19fa22add3de9cd0b98b05366479d92R134) and [watchers to trigger the animation](https://github.com/mcfarhat/actifit-landingpage/pull/1/commits/607c4188d10110e7b27c7812555b701785bbed7c#diff-b19fa22add3de9cd0b98b05366479d92R142).

### Navbar

- https://github.com/mcfarhat/actifit-landingpage/pull/1/commits/3411b61877697943e7819966f1134a12d14a663a

As there are more content sections now and the page got a little bit longer, I added a navbar to smothly scroll up and down.

<center>
![actifit-navbar-scrolling.gif](https://ipfs.busy.org/ipfs/QmZWhMYnBU5E6jJVBxPU7mcyPEquMW6q3DnS7Dtxy4d2nw)
</center>

#### Implementation

The [HTML](https://github.com/mcfarhat/actifit-landingpage/pull/1/commits/3411b61877697943e7819966f1134a12d14a663a#diff-b19fa22add3de9cd0b98b05366479d92R3) is basically just a simple [bootstrap 4 navbar](https://getbootstrap.com/docs/4.1/components/navbar/) with some [custom styling](https://github.com/mcfarhat/actifit-landingpage/pull/1/commits/3411b61877697943e7819966f1134a12d14a663a#diff-b19fa22add3de9cd0b98b05366479d92R229), including an opacity transition on hover.
The `scrollDown` method was [renamed to `scrollTo` and takes the id of the element to scroll to as a parameter](https://github.com/mcfarhat/actifit-landingpage/pull/1/commits/3411b61877697943e7819966f1134a12d14a663a#diff-b19fa22add3de9cd0b98b05366479d92L176)

### More Content Sections

- https://github.com/mcfarhat/actifit-landingpage/pull/1/commits/d77fdc6a78dcda9c6746584d4e81832393e751e8
- https://github.com/mcfarhat/actifit-landingpage/pull/1/commits/fd5bae8b4ddce29cc259b187e4ae8d4ab2834d10
- https://github.com/mcfarhat/actifit-landingpage/pull/1/commits/c1124904be9aa6771dd4959a65a0b2b0048ea0af
- https://github.com/mcfarhat/actifit-landingpage/pull/1/commits/1860a4dd7508fd1d834e56269432e129e683714c

The page now shows a daily leaderboard and all other important people that are involved in the project, like team members and ambassadors.

![image.png](https://ipfs.busy.org/ipfs/Qmbu1bUbRpBdMFgPZL2VV6jo3mhzoXfTi5HBXJzXkqc6yD)


#### Implementation

I added a [CSS class for the avatar images](https://github.com/mcfarhat/actifit-landingpage/pull/1/commits/d77fdc6a78dcda9c6746584d4e81832393e751e8#diff-2dc98acfabc0766ba7f13b92a3ae0abfR32) that are used in all sections.

The displayed users in the different sections are still [static arrays](https://github.com/mcfarhat/actifit-landingpage/pull/1/commits/1860a4dd7508fd1d834e56269432e129e683714c#diff-b19fa22add3de9cd0b98b05366479d92R260) or [directly placed in the HTML](https://github.com/mcfarhat/actifit-landingpage/pull/1/commits/d77fdc6a78dcda9c6746584d4e81832393e751e8#diff-b19fa22add3de9cd0b98b05366479d92R137). In the future there will be API endpoints to provide this data in a dynamic way.

### Footer Component

- https://github.com/mcfarhat/actifit-landingpage/pull/1/commits/7ca4f5cb872cbe9e963cd5f1eb27f0db2966c6c8

I put the footer into its own component to [implement it on the wallet page](https://github.com/mcfarhat/actifit-landingpage/pull/1/commits/447ae00156b92cff21440cf923480abc475c8257) as well.
I also added [social links](https://github.com/mcfarhat/actifit-landingpage/pull/1/commits/7ca4f5cb872cbe9e963cd5f1eb27f0db2966c6c8) for facebook etc. to it.

# That's it!