Minor updates to onboarding

src/components/onboarding/Intro/index.tsx

@@ -1,27 +1,155 @@
-import TempImage from '@/public/assets/graphics/cat404.png';
-import Image from 'next/image';
+import Allocation from '@/public/assets/graphics/onboarding/ACM_Fall23Allocation-JustinLu.jpg';
+import HoldBoba from '@/public/assets/graphics/onboarding/ACM_Fall24BitByteInfo_1-JustinLu.jpg';
+import Murou from '@/public/assets/graphics/onboarding/ACM_Fall24BitByteInfo_2-JustinLu.jpg';
+import Bonfire from '@/public/assets/graphics/onboarding/ACM_Fall24Bonfire_1-JustinLu.jpg';
+import RaymondBack from '@/public/assets/graphics/onboarding/ACM_Fall24Bonfire_2-JustinLu.jpg';
+import TiltKickoff from '@/public/assets/graphics/onboarding/ACM_Fall24Kickoff_1-JustinLu.jpg';
+import FocusPerson from '@/public/assets/graphics/onboarding/ACM_Fall24Kickoff_2-JustinLu.jpg';
+import KickoffBig from '@/public/assets/graphics/onboarding/ACM_Fall24Kickoff_3-JustinLu.jpg';
+import Image, { StaticImageData } from 'next/image';
+import { useEffect, useRef, useState } from 'react';
 import styles from './style.module.scss';
 
+type IntroImage = {
+  src: StaticImageData;
+  alt: string;
+  desktopSize: [x: number, y: number, width: number, height: number];
+  mobileSize: [x: number, y: number, width: number, height: number];
+  round?: boolean;
+};
+
+// https://www.figma.com/design/GiWZdbzJ2uxyknpCrB9UK6/acm-onboarding
+const images: IntroImage[] = [
+  {
+    src: FocusPerson,
+    alt: 'A student smiling in a crowd',
+    desktopSize: [89, 46, 168, 168],
+    mobileSize: [24, 326, 109, 109],
+    round: true,
+  },
+  {
+    src: Bonfire,
+    alt: 'Students around a bonfire holding marshmellows on skewers',
+    desktopSize: [740, 285, 208, 208],
+    mobileSize: [158, 86, 153, 153],
+    round: true,
+  },
+  {
+    src: Murou,
+    alt: 'Students chatting',
+    desktopSize: [49, 175, 138, 138],
+    mobileSize: [213, 293, 86, 86],
+    round: true,
+  },
+  {
+    src: HoldBoba,
+    alt: 'An audience of students watching a presentation',
+    desktopSize: [685, 72, 233, 135],
+    mobileSize: [124, 369, 187, 84],
+  },
+  {
+    src: TiltKickoff,
+    alt: 'A large audience of students at ACM Kickoff',
+    desktopSize: [327, 390, 393, 134],
+    mobileSize: [0, 0, 252, 108],
+    round: true,
+  },
+  {
+    src: Allocation,
+    alt: 'A group photo of students standing before Geisel and Snake Path',
+    desktopSize: [57, 357, 299, 135],
+    mobileSize: [0, 422, 270, 131],
+  },
+  {
+    src: RaymondBack,
+    alt: 'Students standing on a beach on a cloudy day',
+    desktopSize: [289, 29, 326, 146],
+    mobileSize: [0, 116, 146, 110],
+  },
+  {
+    src: KickoffBig,
+    alt: 'A large audience of students forming diamonds with their hands',
+    desktopSize: [173, 116, 631, 308],
+    mobileSize: [12, 173, 287, 206],
+    round: true,
+  },
+];
+images.reverse();
+const DESKTOP_OFFSET_X = 173 + 631 / 2;
+const DESKTOP_OFFSET_Y = 116 + 308 / 2;
+const MOBILE_OFFSET_X = 25 + 261 / 2;
+const MOBILE_OFFSET_Y = 203 + 146 / 2;
+
 const Intro = () => {
+  const [mouseX, setMouseX] = useState(0);
+  const [mouseY, setMouseY] = useState(0);
+  const ref = useRef<HTMLDivElement | null>(null);
+
+  useEffect(() => {
+    const handleMouseMove = (e: PointerEvent) => {
+      if (!ref.current) {
+        return;
+      }
+      const { left, top } = ref.current.getBoundingClientRect();
+      setMouseX(e.pointerType === 'mouse' ? e.clientX - left : 0);
+      setMouseY(e.pointerType === 'mouse' ? e.clientY - top : 0);
+    };
+    document.addEventListener('pointermove', handleMouseMove);
+    return () => {
+      document.removeEventListener('pointermove', handleMouseMove);
+    };
+  });
+
   return (
     <div className={styles.wrapper}>
-      <Image
-        src={TempImage}
-        alt="temp image"
-        width={256}
-        height={256}
-        className={`${styles.image} ${styles.desktopOnly}`}
-        style={{ animationDelay: '0.2s' }}
-      />
-      <Image src={TempImage} alt="temp image" width={256} height={256} className={styles.image} />
-      <Image
-        src={TempImage}
-        alt="temp image"
-        width={256}
-        height={256}
-        className={`${styles.image} ${styles.desktopOnly}`}
-        style={{ animationDelay: '0.4s' }}
-      />
+      <div className={styles.anchor} ref={ref}>
+        {images.map(({ src, alt, desktopSize, mobileSize, round }, i) => (
+          <div
+            key={src.src}
+            className={styles.imageWrapper}
+            style={{
+              transform: `translate(${mouseX / (10 + images.length - i)}px, ${
+                mouseY / (10 + images.length - i)
+              }px)`,
+            }}
+          >
+            <Image
+              className={`${styles.image} ${round ? styles.pill : ''} ${styles.desktopOnly}`}
+              src={src}
+              alt={alt}
+              width={desktopSize[2]}
+              height={desktopSize[3]}
+              style={{
+                left: `${desktopSize[0] - DESKTOP_OFFSET_X}px`,
+                top: `${desktopSize[1] - DESKTOP_OFFSET_Y}px`,
+                transformOrigin: `${DESKTOP_OFFSET_X - desktopSize[0]}px ${
+                  DESKTOP_OFFSET_Y - desktopSize[1]
+                }px`,
+                animationDelay: `${i * 0.1 + 0.5}s`,
+                animationDuration: `${i * 0.05 + 1}s`,
+              }}
+            />
+            <Image
+              className={`${styles.image} ${round ? styles.pill : ''} ${styles.mobileOnly}`}
+              src={src}
+              alt={alt}
+              width={mobileSize[2]}
+              height={mobileSize[3]}
+              style={{
+                left: `calc(${mobileSize[0] - MOBILE_OFFSET_X}px + ${
+                  (mobileSize[0] - MOBILE_OFFSET_X + mobileSize[2] / 2) * 0.2
+                }vw)`,
+                top: `${mobileSize[1] - MOBILE_OFFSET_Y}px`,
+                transformOrigin: `${MOBILE_OFFSET_X - mobileSize[0]}px ${
+                  MOBILE_OFFSET_Y - mobileSize[1]
+                }px`,
+                animationDelay: `${i * 0.1 + 0.5}s`,
+                animationDuration: `${i * 0.05 + 1}s`,
+              }}
+            />
+          </div>
+        ))}
+      </div>
     </div>
   );
 };

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

@@ -4,7 +4,7 @@
   from {
     filter: blur(2rem);
     opacity: 0;
-    transform: scale(0.5);
+    transform: scale(1.2);
   }
 
   to {
@@ -18,16 +18,43 @@
   align-items: center;
   display: flex;
   flex: auto;
-  gap: 1rem;
   justify-content: center;
-
-  .image {
-    animation: appear 1.5s backwards;
+  min-height: 30rem;
+  @media (max-width: vars.$breakpoint-lg) {
+    margin: 0 -2rem;
+    min-height: 35rem;
+    overflow: hidden;
   }
 
-  @media (max-width: vars.$breakpoint-md) {
-    .desktopOnly {
-      display: none;
+  .anchor {
+    position: relative;
+
+    .imageWrapper {
+      .image {
+        animation: appear 1s backwards;
+        border-radius: 1rem;
+        object-fit: cover;
+        object-position: center;
+        position: absolute;
+
+        &.pill {
+          border-radius: 10rem;
+        }
+
+        &.mobileOnly {
+          display: none;
+        }
+
+        @media (max-width: vars.$breakpoint-lg) {
+          &.mobileOnly {
+            display: block;
+          }
+
+          &.desktopOnly {
+            display: none;
+          }
+        }
+      }
     }
   }
 }

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

@@ -1,7 +1,11 @@
 export type Styles = {
+  anchor: string;
   appear: string;
   desktopOnly: string;
   image: string;
+  imageWrapper: string;
+  mobileOnly: string;
+  pill: string;
   wrapper: string;
 };
 

src/components/onboarding/Leaderboard/index.tsx

@@ -73,7 +73,10 @@ const Leaderboard = ({ user }: LeaderboardProps) => {
   }, [userPoints]);
 
   return (
-    <div className={styles.wrapper} style={{ height: `${users.length * 4}rem` }}>
+    <div
+      className={styles.wrapper}
+      style={{ height: `calc(${users.length} * var(--leaderboard-height))` }}
+    >
       {users.map(({ name, points, image }) => {
         const position = sorted.indexOf(name);
         return (
@@ -87,7 +90,7 @@ const Leaderboard = ({ user }: LeaderboardProps) => {
             even={name !== userName}
             className={styles.row}
             style={{
-              transform: `translateY(${position * 4}rem)`,
+              transform: `translateY(calc(${position} * var(--leaderboard-height)))`,
               zIndex: name === userName ? '5' : undefined,
             }}
           />

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

@@ -1,15 +1,27 @@
 @use 'src/styles/vars.scss' as vars;
 
 .wrapper {
+  --leaderboard-height: 4rem;
   border-radius: 0.5rem;
   overflow: hidden;
   position: relative;
 
+  @media (max-width: vars.$breakpoint-md) {
+    --leaderboard-height: 5rem;
+  }
+
   .row {
+    height: var(--leaderboard-height);
     left: 0;
     position: absolute;
     right: 0;
     top: 0;
     transition: transform 0.2s;
+
+    @media (max-width: vars.$breakpoint-sm) {
+      img {
+        display: none;
+      }
+    }
   }
 }