make background pigs that hide from the footer 🐷🐷🐷

web/src/components/general/BgPig.tsx

@@ -0,0 +1,51 @@
+"use client";
+import styles from "./pig.module.scss";
+import { ChillPig } from "./pigs/ChillPig";
+import { DancePig } from "./pigs/DancePig";
+import { DrinkPig } from "./pigs/DrinkPig";
+import { GuardPig } from "./pigs/GuardPig";
+import { KeyPig } from "./pigs/KeyPig";
+import { ListenPig } from "./pigs/ListenPig";
+import { LogoPig } from "./pigs/LogoPig";
+import { MusicPig } from "./pigs/MusicPig";
+import { PeekPig } from "./pigs/PeekPig";
+import { PointPig } from "./pigs/PointPig";
+import { StudentPig } from "./pigs/StudentPig";
+import { useInView } from "react-intersection-observer";
+
+export const BgPig = ({
+  type,
+}: {
+  type:
+    | "logo"
+    | "music"
+    | "drink"
+    | "dance"
+    | "point"
+    | "student"
+    | "listen"
+    | "guard"
+    | "key"
+    | "chill"
+    | "peek";
+}) => {
+  const { ref: observer, inView: IsInView } = useInView({ triggerOnce: false });
+  return (
+    <div className={styles.bgPigWrapper}>
+      <div className={`${styles.pig} ${styles.bgPig}`} data-inview={IsInView}>
+        {type === "logo" && <LogoPig />}
+        {type === "music" && <MusicPig />}
+        {type === "drink" && <DrinkPig />}
+        {type === "dance" && <DancePig />}
+        {type === "point" && <PointPig />}
+        {type === "student" && <StudentPig />}
+        {type === "listen" && <ListenPig />}
+        {type === "guard" && <GuardPig />}
+        {type === "key" && <KeyPig />}
+        {type === "chill" && <ChillPig />}
+        {type === "peek" && <PeekPig />}
+      </div>
+      <div className={styles.observer} ref={observer}></div>
+    </div>
+  );
+};

web/src/components/general/pig.module.scss

@@ -5,4 +5,24 @@
   svg {
     width: 100%;
   }
+}
+
+.bgPig {
+  position: fixed;
+  bottom: 0;
+  right: 0;
+  transform: translate(1vw, 20%);
+  z-index: 600;
+  --color-pig: var(--color-neufPink);
+  transition: opacity .6s ease;
+
+  &[data-inview=true] {
+    opacity: 0;
+  }
+}
+
+.observer {
+  position: absolute;
+  bottom: -5rem;
+  right: 0;
 }