Actifit Landingpage: More Content/Layout

in utopian-io •  5 months ago

image.png

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

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


actifit-numbers.gif

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

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.


actifit-navbar-scrolling.gif

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

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

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

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!

Authors get paid when people like you upvote their post.
If you enjoyed what you read here, create your account today and start earning FREE STEEM!
Sort Order:  

Thanks @mkt for the great work !

·

You're welcome! Tell me when there's more to do. :)

  • Great use of animated gif to show your animation work.
  • Good job on the comments, even in the HTML!
  • It's unfortunate that the Sponsored Athletes are hard coded, perhaps another PR is in the plan?

Your contribution has been evaluated according to Utopian policies and guidelines, as well as a predefined set of questions pertaining to the category.

To view those questions and the relevant answers related to your post, click here.


Need help? Write a ticket on https://support.utopian.io/.
Chat with us on Discord.
[utopian-moderator]

Hey @mkt
Thanks for contributing on Utopian.
We’re already looking forward to your next contribution!

Want to chat? Join us on Discord https://discord.gg/h52nFrV.

Vote for Utopian Witness!

@mkt The website is looking very very cool. Thanks for making it look so amazing .

·

Thank you! :)