Add event sf season ping

the-clothing-loop · Jan 17, 2024 · 185886b · 185886b
1 parent ab0f765
commit 185886b
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 5 deletions.
diff --git a/frontend/src/pages/Events.tsx b/frontend/src/pages/Events.tsx
@@ -382,11 +382,18 @@ function EventItem({ event }: { event: Event }) {
           />
         </Link>
         {isSfSeason2024 ? (
-          <img
-            src="https://images.clothingloop.org/192x192/sf_season_2024.png"
-            className="absolute -bottom-4 left-2 w-24 rotate-[-22deg] "
-            alt="Part of Slow Fashion Season 2024"
-          />
+          <a
+            target="_blank"
+            href="https://slowfashion.global/campaign-sfm/"
+            className="absolute -bottom-4 left-2 group"
+          >
+            <span className="group-hover:animate-[ping-sm_1s_ease-in-out_1] absolute inline-flex h-full w-full rounded-full bg-purple-light opacity-0 group-hover:opacity-75"></span>
+            <img
+              src="https://images.clothingloop.org/192x192/sf_season_2024.png"
+              className="w-24 rotate-[-22deg]"
+              alt="Part of Slow Fashion Season 2024"
+            />
+          </a>
         ) : null}
       </div>
 

diff --git a/frontend/tailwind.config.cjs b/frontend/tailwind.config.cjs
@@ -114,6 +114,12 @@ module.exports = {
             transform: "rotate(90deg)",
           },
         },
+        "ping-sm": {
+          "75%, 100%": {
+            transform: "scale(1.5)",
+            opacity: 0,
+          },
+        },
       },
       animation: {
         slide: "30s linear 0s slide infinite",