feat: data aos

package.json

@@ -10,11 +10,13 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "aos": "^2.3.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-icons": "^5.2.1"
   },
   "devDependencies": {
+    "@types/aos": "^3.0.7",
     "@types/react": "^18.2.66",
     "@types/react-dom": "^18.2.22",
     "@typescript-eslint/eslint-plugin": "^7.2.0",

src/App.tsx

@@ -3,8 +3,19 @@ import Benefit from "./components/Benefit";
 import FAQ from "./components/FAQ";
 import Jumbotron from "./components/Jumbotron";
 import Footer from "./components/Footer";
+import { useEffect } from "react";
+import AOS from "aos";
+import "aos/dist/aos.css";
 
 function App() {
+  useEffect(() => {
+    AOS.init({
+      offset: 80,
+      duration: 300,
+      once: true,
+      easing: "ease-out",
+    });
+  }, []);
   return (
     <main className="antialiased">
       <Header />

src/components/Benefit/index.tsx

@@ -8,6 +8,7 @@ const Benefit = () => {
       {BENEFIT_ITEM.map((item) => (
         <div
           key={item.title}
+          data-aos="fade-up"
           className="bg-gradient-to-tr from-primary to-secondary rounded-md p-1 shadow-xl">
           <div className="flex flex-col justify-start items-center bg-white rounded-md p-4 max-w-80 w-full h-full">
             <div className="bg-gradient-to-tr from-primary to-secondary rounded-full p-1">

src/components/FAQ/accordion.tsx

@@ -11,7 +11,7 @@ const Accordion = ({
   const [isOpen, setIsOpen] = useState(false);
 
   return (
-    <div className="shadow-xl rounded-md overflow-hidden">
+    <div data-aos="fade-up" className="shadow-xl rounded-md overflow-hidden">
       <button
         onClick={() => setIsOpen(!isOpen)}
         className="p-4 flex justify-between w-full items-center relative duration-300 bg-primary">