feat: ✨ Add load animation

package.json

@@ -23,6 +23,7 @@
     "@mui/material": "^5.6.1",
     "@mui/x-date-pickers": "^5.0.0-alpha.2",
     "@splidejs/splide": "^4.0.1",
+    "animate.css": "^4.1.1",
     "dayjs": "^1.11.1",
     "framer-motion": "^6.3.0",
     "immer": "^9.0.12",

src/modules/home/HomeLayout.tsx

@@ -2,11 +2,12 @@ import Link from 'next/link';
 import Image from 'next/image';
 import { NavBarActions, StyledButton } from '../builder/nav-bar/atoms';
 import { Button } from '@mui/material';
+import 'animate.css';
 
 const HomeLayout = () => {
   return (
     <>
-      <div className="bg-resume-50">
+      <div className="bg-resume-50 animate__animated animate__zoomIn">
         <nav className="h-14 w-full bg-resume-800 relative flex py-2.5 pl-40 pr-4 items-center">
           <Image src={'/icons/resume-icon.svg'} alt="logo" height={'36px'} width={'36px'} />
           <div className="flex-auto flex justify-between items-center ml-5">

yarn.lock

@@ -3956,6 +3956,11 @@ ajv@^6.1.0, ajv@^6.10.0, ajv@^6.10.2, ajv@^6.12.2, ajv@^6.12.4, ajv@^6.12.5:
     json-schema-traverse "^0.4.1"
     uri-js "^4.2.2"
 
+animate.css@^4.1.1:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/animate.css/-/animate.css-4.1.1.tgz#614ec5a81131d7e4dc362a58143f7406abd68075"
+  integrity sha512-+mRmCTv6SbCmtYJCN4faJMNFVNN5EuCTTprDTAo7YzIGji2KADmakjVA3+8mVDkZ2Bf09vayB35lSQIex2+QaQ==
+
 ansi-align@^3.0.0:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/ansi-align/-/ansi-align-3.0.1.tgz#0cdf12e111ace773a86e9a1fad1225c43cb19a59"