Actifit Landingpage: More Content/Layout
Repository
https://github.com/mcfarhat/actifit-landingpage
Pull Request
https://github.com/mcfarhat/actifit-landingpage/pull/1
About the project:
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
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
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.
Thanks @mkt for the great work !
You're welcome! Tell me when there's more to do. :)
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! :)