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.

Implementation

For the animation I use TweenMax from the Gsap animation library. After separating the data into multiple component data properties I added some computed properties and watchers to trigger the animation.

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.

Implementation

The HTML is basically just a simple bootstrap 4 navbar with some custom styling, 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

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.

Implementation

I added a CSS class for the avatar images that are used in all sections.

The displayed users in the different sections are still static arrays or directly placed in the HTML. 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 as well.
I also added social links for facebook etc. to it.

That's it!