Feature/sticky note animation

apps/site/src/app/(home)/sections/Landing/ApplyButton.tsx

@@ -1,6 +1,12 @@
 import Button from "react-bootstrap/Button";
 import StickerPosition from "@/components/Sticker/StickerPosition";
-import { HackSticker, HeartSticker } from "@/components/Sticker/Stickers";
+import {
+	PencilSticker,
+	HeartSticker,
+	HeadphoneSticker,
+	LaptopSticker,
+	MagnifyingGlassSticker,
+} from "@/components/Sticker/Stickers";
 
 import styles from "./ApplyButton.module.scss";
 

apps/site/src/components/Sticker/Stickers/HackSticker/HackSticker.tsx

@@ -8,8 +8,8 @@ const HackSticker: React.FC<StickerProps> = (props) => (
 	<BaseSticker
 		imageSrc={HackLogo.src}
 		alt="Hack at UCI sticker"
-		height={200}
-		width={200}
+		height={150}
+		width={150}
 		{...lightShake}
 		{...props}
 	/>

apps/site/src/components/Sticker/Stickers/index.tsx

@@ -0,0 +1,78 @@
+import type React from "react";
+import type { StickerProps } from "./stickerProps";
+import HackLogo from "@/assets/icons/hack.png";
+import HeartEmoji from "@/assets/images/heart_emoji.png";
+import MagnifyingGlass from "@/assets/images/magnifying_glass.png";
+import Laptop from "@/assets/images/laptop.png";
+import Pencil from "@/assets/images/pencil.png";
+import Headphone from "@/assets/images/headphones.png";
+import BaseSticker from "../BaseSticker";
+import { fastShake, lightShake } from "@/components/animation";
+
+export const HackSticker: React.FC<StickerProps> = (props) => {
+	return (
+		<BaseSticker
+			imageSrc={HackLogo.src}
+			alt="Hack at UCI sticker"
+			height={150}
+			width={150}
+			{...lightShake}
+			{...props}
+		/>
+	);
+};
+
+export const HeartSticker: React.FC<StickerProps> = (props) => (
+	<BaseSticker
+		imageSrc={HeartEmoji.src}
+		alt="heart emoji sticker"
+		height={150}
+		width={150}
+		{...fastShake}
+		{...props}
+	/>
+);
+
+export const PencilSticker: React.FC<StickerProps> = (props) => (
+	<BaseSticker
+		imageSrc={Pencil.src}
+		alt="pencil sticker"
+		height={150}
+		width={150}
+		{...fastShake}
+		{...props}
+	/>
+);
+
+export const MagnifyingGlassSticker: React.FC<StickerProps> = (props) => (
+	<BaseSticker
+		imageSrc={MagnifyingGlass.src}
+		alt="magnifying glass sticker"
+		height={200}
+		width={200}
+		{...fastShake}
+		{...props}
+	/>
+);
+
+export const LaptopSticker: React.FC<StickerProps> = (props) => (
+	<BaseSticker
+		imageSrc={Laptop.src}
+		alt="laptop sticker"
+		height={150}
+		width={150}
+		{...fastShake}
+		{...props}
+	/>
+);
+
+export const HeadphoneSticker: React.FC<StickerProps> = (props) => (
+	<BaseSticker
+		imageSrc={Headphone.src}
+		alt="headphone sticker"
+		height={150}
+		width={150}
+		{...fastShake}
+		{...props}
+	/>
+);

apps/site/src/lib/styles/globals.scss

@@ -5,6 +5,8 @@ $container-padding: 8rem;
 .background {
 	background-image: url("~@/assets/background/anteater-head-tiling.gif");
 	background-size: 464px; // half size for 2x scaling
+	overflow-x: hidden;
+	max-width: 100%;
 }
 
 .accordion {

apps/site/src/views/Resources/components/ResourceCard/ResourceCard.module.scss

@@ -13,7 +13,9 @@
 	width: 238px;
 	height: 60px;
 	position: absolute;
-	top: -12.5%;
+	top: 3%;
+	left: 15%;
+	z-index: 10;
 }
 
 .container {

apps/site/src/views/Resources/components/ResourceCard/ResourceCard.tsx

@@ -1,5 +1,6 @@
+"use client";
 import Image from "next/image";
-
+import { Variants, motion, AnimatePresence, cubicBezier } from "framer-motion";
 import openNewWindow from "@/assets/icons/open-new-window.svg";
 import styles from "./ResourceCard.module.scss";
 
@@ -16,6 +17,27 @@ interface ResourceCardProps {
 	stickyNoteColor: string;
 }
 
+const variant: Variants = {
+	initial: {
+		scale: 1.1,
+		opacity: 0,
+		rotateX: 20,
+		translateY: 30,
+	},
+	animate: {
+		scale: 1,
+		rotateX: 0,
+		opacity: 1,
+		translateY: 0,
+		transition: {
+			duration: 0.85,
+			staggerChildren: 0.1,
+			staggerDirection: -1,
+			ease: cubicBezier(0.33, 1, 0.68, 1),
+		},
+	},
+};
+
 export default function ResourceCard({
 	title,
 	description,
@@ -24,38 +46,75 @@ export default function ResourceCard({
 	stickyNoteColor,
 }: ResourceCardProps) {
 	return (
-		<div
-			className={styles.group}
-			style={{
-				backgroundColor: `${stickyNoteColor}`,
-			}}
-		>
-			<div className={styles.container + " text-center px-3"}>
-				<div className={styles.tape}></div>
-				{stickerSrc && <img src={stickerSrc} alt="Resource logo" width="100" />}
-				<h3>{title}</h3>
-				{description}
-			</div>
-
-			{links.map(({ text, link }) => (
-				<a
-					key={link}
-					href={link}
-					target="_blank"
-					rel="noopener noreferrer"
-					className={styles.tag}
+		<AnimatePresence mode="wait">
+			<motion.div style={{ position: "relative" }}>
+				<motion.div
+					initial={{
+						scale: 1.1,
+						opacity: 0,
+						rotateX: 15,
+					}}
+					viewport={{ once: true }}
+					whileInView={{
+						scale: 1,
+						rotateX: 0,
+						opacity: 1,
+						transition: {
+							delay: 0.3,
+							duration: 0.8,
+							ease: cubicBezier(0.64, 0, 0.78, 0),
+						},
+					}}
+					className={styles.tape}
+				></motion.div>
+				<motion.div
+					variants={variant}
+					initial="initial"
+					whileInView="animate"
+					viewport={{ once: true }}
+					className={styles.group}
+					style={{
+						backgroundColor: `${stickyNoteColor}`,
+					}}
 				>
-					{text}
-					<div className="d-inline ms-1 vertical-align-middle">
-						<Image
-							src={openNewWindow}
-							width="20"
-							height="20"
-							alt="Open link in new window"
-						/>
+					<div className={styles.container + " text-center px-3"}>
+						{stickerSrc && (
+							<motion.img
+								src={stickerSrc}
+								alt="Resource logo"
+								width="100"
+								variants={variant}
+							/>
+						)}
+						<h3>{title}</h3>
+						{description}
 					</div>
-				</a>
-			))}
-		</div>
+
+					{links.map(({ text, link }) => (
+						<motion.a
+							key={link}
+							href={link}
+							target="_blank"
+							rel="noopener noreferrer"
+							className={styles.tag}
+							variants={variant}
+						>
+							{text}
+							<motion.div
+								className="d-inline ms-1 vertical-align-middle"
+								variants={variant}
+							>
+								<Image
+									src={openNewWindow}
+									width="20"
+									height="20"
+									alt="Open link in new window"
+								/>
+							</motion.div>
+						</motion.a>
+					))}
+				</motion.div>
+			</motion.div>
+		</AnimatePresence>
 	);
 }