feat(JoinUs): add wave animation to emoji

[EnzoVieira]

Added just a simple shake animation to hand emoji on the "Join Us 👋🏻" button in landing page that runs every 5 seconds

related issue: #516

[netlify]

✅ Deploy Preview for seium-stg ready!

Name	Link
🔨 Latest commit	5ca1121
🔍 Latest deploy log	https://app.netlify.com/sites/seium-stg/deploys/655f9aabc3392c000840613b
😎 Deploy Preview	https://deploy-preview-575--seium-stg.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[MarioRodrigues10]

Could you ensure that it continues to wave indefinitely?

[EnzoVieira]

Could you ensure that it continues to wave indefinitely?

Yes, I can ensure that it runs infinitely. I used a little trick that is basically:

animation: { wave: "wave 5s ... infinite" }

the animation runs infinite, but the problem is that we want a "offset" between each animation of about 5 seconds. It is not possible to tell CSS that we want that, so I used a little trick to make this space between each animation.

the animation is a keyframe that will only apply changes until 21% of the total animation duration. 21% of 5 seconds is about 1 second of animation and 4 seconds of "nothing" (offset).

keyframes: {
  wave: {
    "6%, 12%": { ... },
    "9%, 15%": { ... },
    "21%": { ... },
}

and this will run infinitely because we said that the animation-iteration-count is infinite

[EnzoVieira]

also, I forgot to mention the I tried to make the animation runs every 10 seconds as it says in the issue, but I thought that it took way to much time and I think half of time is way better.