try annotating badges on event card

src/components/events/EventCard/index.tsx

@@ -16,7 +16,7 @@ import {
 } from '@/lib/utils';
 import Image from 'next/image';
 import Link from 'next/link';
-import { useState } from 'react';
+import { ComponentType, Fragment, ReactNode, useState } from 'react';
 import styles from './style.module.scss';
 
 interface EventCardProps {
@@ -26,6 +26,9 @@ interface EventCardProps {
   showYear?: boolean;
   borderless?: boolean;
   hideInfo?: boolean;
+  interactive?: boolean;
+  /** Used by onboarding to highlight the badges */
+  badgeWrapper?: ComponentType<{ children: ReactNode }>;
 }
 
 const EventCard = ({
@@ -35,6 +38,8 @@ const EventCard = ({
   showYear,
   borderless,
   hideInfo,
+  interactive = true,
+  badgeWrapper: BadgeWrapper = Fragment,
 }: EventCardProps) => {
   const { uuid, cover, title, start, end, location, committee } = isOrderPickupEvent(event)
     ? {
@@ -49,6 +54,8 @@ const EventCard = ({
 
   const displayCover = getDefaultEventCover(cover);
 
+  const Component = interactive ? Link : 'div';
+
   return (
     <>
       {isPickupEvent ? (
@@ -71,12 +78,17 @@ const EventCard = ({
         />
       )}
 
-      <Link
+      <Component
         href={`${config.eventsRoute}/${uuid}`}
         data-community={community}
         data-disabled={borderless}
-        className={`${styles.container} ${borderless ? '' : styles.bordered} ${className || ''}`}
+        className={`${styles.container} ${borderless ? '' : styles.bordered} ${className || ''} ${
+          interactive ? styles.interactive : ''
+        }`}
         onClick={e => {
+          if (!interactive) {
+            return;
+          }
           e.preventDefault();
           setExpanded(true);
         }}
@@ -117,10 +129,12 @@ const EventCard = ({
                 {location}
               </Typography>
             </div>
-            <EventBadges event={event} attended={attended} />
+            <BadgeWrapper>
+              <EventBadges event={event} attended={attended} />
+            </BadgeWrapper>
           </div>
         ) : null}
-      </Link>
+      </Component>
     </>
   );
 };

src/components/events/EventCard/style.module.scss

@@ -20,7 +20,7 @@
     border-radius: 10px;
   }
 
-  &:not([data-disabled]):hover {
+  &.interactive:not([data-disabled]):hover {
     outline-width: 4px;
     transform: scale(0.975);
 

src/components/events/EventCard/style.module.scss.d.ts

@@ -4,6 +4,7 @@ export type Styles = {
   image: string;
   info: string;
   infoText: string;
+  interactive: string;
 };
 
 export type ClassNames = keyof Styles;

src/components/events/EventFilter/index.tsx

@@ -16,6 +16,7 @@ interface EventFilterProps {
   filters: FilterOptions;
   onFilter?: (param: string, value: string) => void;
   loggedOut?: boolean;
+  className?: string;
 }
 
 export const DEFAULT_FILTER_STATE: FilterEventOptions = {
@@ -29,11 +30,12 @@ const EventFilter = ({
   filters: { search, communityFilter, dateFilter, attendanceFilter },
   onFilter,
   loggedOut,
+  className = '',
 }: EventFilterProps) => {
   const years = useMemo(getYears, []);
 
   return (
-    <div className={styles.controls}>
+    <div className={`${styles.controls} ${className}`}>
       <input
         className={styles.search}
         type="search"

src/components/onboarding/Events/index.tsx

@@ -1,6 +1,7 @@
 import { Typography } from '@/components/common';
 import { DEFAULT_FILTER_STATE, EventCard, EventFilter } from '@/components/events';
 import { PublicEvent } from '@/lib/types/apiResponses';
+import { PropsWithChildren } from 'react';
 import styles from './style.module.scss';
 
 const dummyEvents: PublicEvent[] = [
@@ -24,50 +25,65 @@ const dummyEvents: PublicEvent[] = [
     discordEvent: '1285653645505069086',
   },
   {
-    uuid: '4c44e774-ada8-4a04-921e-4587d819effd',
+    uuid: 'e154acf7-3465-49e4-baa6-f40bfa2f4ad8',
     organization: 'ACM',
-    committee: 'General',
+    committee: 'Cyber',
     thumbnail: null,
     cover:
-      'https://acmucsd.s3.us-west-1.amazonaws.com/portal/events/4c44e774-ada8-4a04-921e-4587d819effd.png',
-    title: 'Bit Byte Info Session',
+      'https://acmucsd.s3.us-west-1.amazonaws.com/portal/events/e154acf7-3465-49e4-baa6-f40bfa2f4ad8.png',
+    title: 'Lockpicking 101',
     description:
-      "Looking to learn about ACM's Bit-Byte mentorship big/little program? Swing by our info session where we'll discuss the timeline, structure, requirements, and overall vibes! ask any questions and get hyped for the upcoming iteration!",
-    location: 'CSE 1202',
-    eventLink: 'acmurl.com/bitbyteinfosesh',
-    start: '2024-10-02T00:00:00.000Z',
-    end: '2024-10-02T01:30:00.000Z',
+      "Wanna learn how to pick locks? Ever gotten locked out of your dorm? \n\nCome and join ACM Cyber at Lockpicking 101! We'll be demonstrating the core theory of breaking the security of locks, including techniques such as bumping, raking, single-pin picking, and impressioning! We will also be providing practice locks and picks for YOU🫵 to hone your picking skills. Become a lockpicking virtuoso 🤩✨✨",
+    location: 'SME ASML Room',
+    eventLink: 'acmurl.com/lockpicking',
+    start: '2024-04-13T01:30:00.000Z',
+    end: '2024-04-13T03:30:00.000Z',
     pointValue: 10,
     requiresStaff: false,
     staffPointBonus: 0,
-    discordEvent: '1288736115079118881',
+    discordEvent: null,
   },
   {
-    uuid: 'eb4cb2c6-f6e1-4fc0-b086-a93ac066d933',
+    uuid: '9d2023d4-3649-4407-8538-d71687656c45',
     organization: 'ACM',
-    committee: 'General',
+    committee: 'AI',
     thumbnail: null,
     cover:
-      'https://acmucsd.s3.us-west-1.amazonaws.com/portal/events/eb4cb2c6-f6e1-4fc0-b086-a93ac066d933.png',
-    title: 'Resume Review',
+      'https://acmucsd.s3.us-west-1.amazonaws.com/portal/events/9d2023d4-3649-4407-8538-d71687656c45.png',
+    title: 'Deep Reinforcement Learning',
     description:
-      "Recruitment is in season! Come out and join ACM's resume review night, where we'll go over bulletproof strategies for creating and tailoring your resume for whatever opportunities you want to pursue! Regardless of your experience level, we will help you workshop and develop your resume so that you can present your best self!",
-    location: 'Qualcomm Room',
-    eventLink: 'acmurl.com/resume-review',
-    start: '2024-10-03T00:30:00.000Z',
-    end: '2024-10-03T02:00:00.000Z',
+      "Come learn about AI tools and models at ACM AI's third spring quarter technical workshop!",
+    location: 'DIB 202/208',
+    eventLink: 'acmurl.com/ai-sp-ws3',
+    start: '2023-06-03T01:00:00.000Z',
+    end: '2023-06-03T03:00:00.000Z',
     pointValue: 10,
     requiresStaff: false,
     staffPointBonus: 0,
-    discordEvent: '1288736670102851625',
+    discordEvent: null,
   },
 ];
 
+const BadgeAnnotation = ({ children }: PropsWithChildren) => {
+  return (
+    <div className={styles.badgeWrapper}>
+      {children}
+      <div className={styles.annotation}>
+        Each event is categorized under one of the ACM communities and tagged with the number of
+        points you can earn from attending.
+      </div>
+    </div>
+  );
+};
+
 const Events = () => {
   return (
     <div className={styles.page}>
-      <Typography variant="headline/heavy/small">Events</Typography>
+      <Typography variant="headline/heavy/small" className={styles.fadeOut}>
+        Events
+      </Typography>
       <EventFilter
+        className={`${styles.desktopOnly} ${styles.fadeOut}`}
         filters={{
           search: DEFAULT_FILTER_STATE.search,
           communityFilter: DEFAULT_FILTER_STATE.community,
@@ -76,8 +92,16 @@ const Events = () => {
         }}
       />
       <div className={styles.events}>
-        {dummyEvents.map(event => (
-          <EventCard key={event.uuid} event={event} attended={false} showYear />
+        {dummyEvents.map((event, i) => (
+          <EventCard
+            key={event.uuid}
+            event={event}
+            attended={false}
+            showYear
+            className={i !== 0 ? `${styles.desktopOnly} ${styles.fadeOut}` : undefined}
+            badgeWrapper={i === 0 ? BadgeAnnotation : undefined}
+            interactive={false}
+          />
         ))}
       </div>
     </div>

src/components/onboarding/Events/style.module.scss

@@ -10,5 +10,75 @@
     display: flex;
     gap: 1rem;
     justify-content: space-between;
+
+    @media (max-width: vars.$breakpoint-lg) {
+      justify-content: center;
+    }
+
+    .badgeWrapper {
+      animation: badge-highlight 0.5s 1s forwards;
+      border: 2px solid transparent;
+      border-radius: 4px;
+      margin: calc(-0.25rem - 2px);
+      padding: 0.25rem;
+      position: relative;
+      transform-origin: left;
+      width: fit-content;
+
+      .annotation {
+        animation: annotation-appear 0.5s 1.5s backwards;
+        bottom: 100%;
+        left: 0;
+        position: absolute;
+        transform: scale(calc(1 / 1.2));
+        white-space: pre-wrap;
+      }
+    }
+  }
+
+  .fadeOut {
+    animation: fade-out 0.5s 1s forwards;
+  }
+
+  .desktopOnly {
+    @media (max-width: vars.$breakpoint-lg) {
+      display: none;
+    }
+  }
+}
+
+@keyframes fade-out {
+  from {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0.3;
+  }
+}
+
+@keyframes badge-highlight {
+  from {
+    background-color: transparent;
+    border-color: transparent;
+    transform: scale(1);
+  }
+
+  to {
+    background-color: rgba(255, 243, 181, 0.6);
+    border-color: #ffdc24;
+    transform: scale(1.2);
+  }
+}
+
+@keyframes annotation-appear {
+  from {
+    opacity: 0;
+    transform: translateY(1rem) scale(calc(1 / 1.2));
+  }
+
+  to {
+    opacity: 1;
+    transform: scale(calc(1 / 1.2));
   }
 }

src/components/onboarding/Events/style.module.scss.d.ts

@@ -1,5 +1,11 @@
 export type Styles = {
+  annotation: string;
+  annotationAppear: string;
+  badgeHighlight: string;
+  badgeWrapper: string;
+  desktopOnly: string;
   events: string;
+  fadeOut: string;
   page: string;
 };