move some pigs around and add a glowing neon friend

web/src/components/general/BgPig.tsx

@@ -1,16 +1,16 @@
 "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 { ChillPig } from "./pigs/simple/ChillPig";
+import { DancePig } from "./pigs/simple/DancePig";
+import { DrinkPig } from "./pigs/simple/DrinkPig";
+import { GuardPig } from "./pigs/simple/GuardPig";
+import { KeyPig } from "./pigs/simple/KeyPig";
+import { ListenPig } from "./pigs/simple/ListenPig";
+import { LogoPig } from "./pigs/simple/LogoPig";
+import { MusicPig } from "./pigs/simple/MusicPig";
+import { PeekPig } from "./pigs/simple/PeekPig";
+import { PointPig } from "./pigs/simple/PointPig";
+import { StudentPig } from "./pigs/simple/StudentPig";
 import { useInView } from "react-intersection-observer";
 
 export const BgPig = ({

web/src/components/general/Pig.tsx

@@ -1,15 +1,15 @@
 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 { ChillPig } from "./pigs/simple/ChillPig";
+import { DancePig } from "./pigs/simple/DancePig";
+import { DrinkPig } from "./pigs/simple/DrinkPig";
+import { GuardPig } from "./pigs/simple/GuardPig";
+import { KeyPig } from "./pigs/simple/KeyPig";
+import { ListenPig } from "./pigs/simple/ListenPig";
+import { LogoPig } from "./pigs/simple/LogoPig";
+import { MusicPig } from "./pigs/simple/MusicPig";
+import { PeekPig } from "./pigs/simple/PeekPig";
+import { PointPig } from "./pigs/simple/PointPig";
+import { StudentPig } from "./pigs/simple/StudentPig";
 
 export const Pig = ({
   type,

web/src/components/general/pigs/fun/neonChillPig.module.scss

@@ -0,0 +1,27 @@
+.neonChillPig {
+  position: relative;
+  width: 20rem;
+  height: 8rem;
+
+  .static,
+  .animate {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+  }
+
+  .animate {
+    animation: glow 1s infinite alternate;
+  }
+}
+
+@keyframes glow {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}

web/src/components/layout/Footer.tsx

@@ -1,15 +1,9 @@
-"use client";
 import Link from "next/link";
 import styles from "./footer.module.scss";
+import { NeonChillPig } from "../general/pigs/fun/NeonChillPig";
+import { ToTop } from "./ToTop";
 
 export const Footer = () => {
-  const scrollToTop = () => {
-    window.scrollTo({
-      top: 0,
-      behavior: "smooth",
-    });
-  };
-
   return (
     <footer className={styles.footer}>
       <div className={styles.contact}>
@@ -79,7 +73,8 @@ export const Footer = () => {
           </li>
         </ul>
       </div>
-      <button onClick={scrollToTop}>Til toppen</button>
+      <NeonChillPig />
+      <ToTop />
     </footer>
   );
 };

web/src/components/layout/ToTop.tsx

@@ -0,0 +1,12 @@
+"use client";
+import { useInView } from "react-intersection-observer";
+
+export const ToTop = () => {
+  const scrollToTop = () => {
+    window.scrollTo({
+      top: 0,
+      behavior: "smooth",
+    });
+  };
+  return <button onClick={scrollToTop}>Til toppen</button>;
+};