Bouncing Amogus

src/components/Dashboard/Dashboard.tsx

@@ -1,5 +1,7 @@
 import FourTwenty from "@components/FourTwenty/FourTwenty";
+import classNames from "classnames";
 import { useEffect, useState } from "react";
+import Amogus from "@/components/Amogus/Amogus";
 import Card from "@/components/Card/Card";
 import {
     CardColumn,
@@ -11,7 +13,7 @@ import Footer from "@/components/Footer/Footer";
 import Terminal from "@/components/Terminal/Terminal";
 import Timetable from "@/components/Timetable/Timetable";
 import Weather from "@/components/Weather/Weather";
-import amogus from "/img/amogus.png";
+
 import style from "./style.module.css";
 
 export default function Dashboard() {
@@ -42,9 +44,7 @@ export default function Dashboard() {
 
     return (
         <div className={`${style.dashboard} ${scheme}`}>
-            <div className={style.amogus}>
-                <img src={amogus} alt="Amogus" />
-            </div>
+            <Amogus />
             <div className={style.body}>
                 <CardColumn>
                     <Card icon="🚊" name="Timetable">
@@ -59,9 +59,17 @@ export default function Dashboard() {
                         <Card icon="🌤" name="Weather">
                             <Weather />
                         </Card>
-                        <Card icon="🍁" name="420">
-                            <FourTwenty />
-                        </Card>
+
+                        <div
+                            className={classNames(
+                                style.bouncingWindow,
+                                style.hidden,
+                            )}
+                        >
+                            <Card icon="🍁" name="420">
+                                <FourTwenty />
+                            </Card>
+                        </div>
                     </CardRow>
 
                     <Card icon="🔔" name="Terminal" active={true}>