From 5ca112108104e6695072be8a097d9ec380c82e3b Mon Sep 17 00:00:00 2001
From: Enzo Vieira <enzovieira16@hotmail.com>
Date: Thu, 23 Nov 2023 18:25:47 +0000
Subject: [PATCH] feat(JoinUs): add wave animation to emoji

---
 components/JoinUs/{index.jsx => index.tsx} | 2 +-
 tailwind.config.js                         | 8 ++++++++
 2 files changed, 9 insertions(+), 1 deletion(-)
 rename components/JoinUs/{index.jsx => index.tsx} (79%)

diff --git a/components/JoinUs/index.jsx b/components/JoinUs/index.tsx
similarity index 79%
rename from components/JoinUs/index.jsx
rename to components/JoinUs/index.tsx
index cecc6b0f..a58022fe 100644
--- a/components/JoinUs/index.jsx
+++ b/components/JoinUs/index.tsx
@@ -4,7 +4,7 @@ export default function JoinUs(props) {
       href="https://sei23.eventbrite.pt"
       className={`flex h-28 w-28 flex-shrink-0 rotate-15 transform items-center justify-center font-ibold text-xl text-${props.fgColor} bg-${props.button} translate-x-0 rounded-full`}
     >
-      Join us 👋
+      Join us <span className="origin-bottom-right animate-wave">👋</span>
     </a>
   );
 }
diff --git a/tailwind.config.js b/tailwind.config.js
index 4f16dcd1..3ad46d22 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -46,7 +46,15 @@ module.exports = {
         ithin: ["Inter-Thin"],
         terminal: ["Terminal"],
       },
+      animation: {
+        wave: "wave 5s cubic-bezier(0.4, 0, 0.2, 1) infinite",
+      },
       keyframes: {
+        wave: {
+          "6%, 12%": { transform: "rotate(15deg)" },
+          "9%, 15%": { transform: "rotate(-15deg)" },
+          "21%": { transform: "rotate(0deg)" },
+        },
         "typewriter-cursor-pulse": {
           "50%": { opacity: 0 },
         },