From 51c350071e46811d92577a0885189b8e106f8a68 Mon Sep 17 00:00:00 2001
From: Faisal Bahari <fbhr1112@gmail.com>
Date: Fri, 24 May 2024 04:35:45 +0700
Subject: [PATCH] feat: data aos

---
 package-lock.json                | 33 ++++++++++++++++++++++++++++++++
 package.json                     |  2 ++
 src/App.tsx                      | 11 +++++++++++
 src/components/Benefit/index.tsx |  1 +
 src/components/FAQ/accordion.tsx |  2 +-
 5 files changed, 48 insertions(+), 1 deletion(-)

diff --git a/package-lock.json b/package-lock.json
index 6e2b42f..0d39538 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,11 +8,13 @@
       "name": "abonie-short.co",
       "version": "0.0.0",
       "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",
@@ -1260,6 +1262,12 @@
         "win32"
       ]
     },
+    "node_modules/@types/aos": {
+      "version": "3.0.7",
+      "resolved": "https://registry.npmjs.org/@types/aos/-/aos-3.0.7.tgz",
+      "integrity": "sha512-sEhyFqvKauUJZDbvAB3Pggynrq6g+2PS4XB3tmUr+mDL1gfDJnwslUC4QQ7/l8UD+LWpr3RxZVR/rHoZrLqZVg==",
+      "dev": true
+    },
     "node_modules/@types/babel__core": {
       "version": "7.20.5",
       "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.5.tgz",
@@ -1619,6 +1627,16 @@
         "node": ">= 8"
       }
     },
+    "node_modules/aos": {
+      "version": "2.3.4",
+      "resolved": "https://registry.npmjs.org/aos/-/aos-2.3.4.tgz",
+      "integrity": "sha512-zh/ahtR2yME4I51z8IttIt4lC1Nw0ktsFtmeDzID1m9naJnWXhCoARaCgNOGXb5CLy3zm+wqmRAEgMYB5E2HUw==",
+      "dependencies": {
+        "classlist-polyfill": "^1.0.3",
+        "lodash.debounce": "^4.0.6",
+        "lodash.throttle": "^4.0.1"
+      }
+    },
     "node_modules/arg": {
       "version": "5.0.2",
       "resolved": "https://registry.npmjs.org/arg/-/arg-5.0.2.tgz",
@@ -1836,6 +1854,11 @@
         "node": ">= 6"
       }
     },
+    "node_modules/classlist-polyfill": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/classlist-polyfill/-/classlist-polyfill-1.2.0.tgz",
+      "integrity": "sha512-GzIjNdcEtH4ieA2S8NmrSxv7DfEV5fmixQeyTmqmRmRJPGpRBaSnA2a0VrCjyT8iW8JjEdMbKzDotAJf+ajgaQ=="
+    },
     "node_modules/color-convert": {
       "version": "1.9.3",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
@@ -2877,12 +2900,22 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/lodash.debounce": {
+      "version": "4.0.8",
+      "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
+      "integrity": "sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow=="
+    },
     "node_modules/lodash.merge": {
       "version": "4.6.2",
       "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
       "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==",
       "dev": true
     },
+    "node_modules/lodash.throttle": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/lodash.throttle/-/lodash.throttle-4.1.1.tgz",
+      "integrity": "sha512-wIkUCfVKpVsWo3JSZlc+8MB5it+2AN5W8J7YVMST30UrvcQNZ1Okbj+rbVniijTWE6FGYy4XJq/rHkas8qJMLQ=="
+    },
     "node_modules/loose-envify": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
diff --git a/package.json b/package.json
index 50ec190..4db2b48 100644
--- a/package.json
+++ b/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",
diff --git a/src/App.tsx b/src/App.tsx
index b336b0c..0feaa87 100644
--- a/src/App.tsx
+++ b/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 />
diff --git a/src/components/Benefit/index.tsx b/src/components/Benefit/index.tsx
index 547793c..762e50b 100644
--- a/src/components/Benefit/index.tsx
+++ b/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">
diff --git a/src/components/FAQ/accordion.tsx b/src/components/FAQ/accordion.tsx
index a82849d..08b4f54 100644
--- a/src/components/FAQ/accordion.tsx
+++ b/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">