From 73307b4df78bafecca5b5410a9c0b6dd91992370 Mon Sep 17 00:00:00 2001
From: Nguyen Thanh Quynh Linh <nguyenthanhquynhlinh@gmail.com>
Date: Mon, 17 Jun 2024 22:25:08 +0700
Subject: [PATCH] Update ModernTimeline

---
 package-lock.json                             | 188 ++---------
 package.json                                  |   1 +
 src/app/(page)/albums/page.tsx                |   8 +-
 src/app/(page)/layout.tsx                     |  27 +-
 src/app/(page)/page.tsx                       |  27 +-
 src/components/Home/HomeAlbums/HomeAlbums.tsx |   6 +-
 src/components/Home/home.module.scss          |  34 +-
 src/components/Image/ImageBanner.tsx          |  77 +++--
 src/components/Loader/HeartLoader.module.scss | 297 ++++++++++++++++++
 src/components/Loader/HeartLoader.tsx         |  18 ++
 src/components/Loader/LoadingPage.module.scss | 171 ++++++++++
 src/components/Loader/LoadingPage.tsx         |  40 +++
 src/components/Modal/ModernTimeline.tsx       |  66 ++++
 .../ModernTimeline/ModernTimeline.module.scss |  12 +-
 .../ModernTimeline/ModernTimeline.tsx         | 246 ++++-----------
 .../ModernTimeline/ModernTimelineEvent.tsx    |  90 ++++++
 .../ModernTimeline/TextComponent.tsx          |  24 --
 src/libs/data.ts                              |   1 -
 18 files changed, 880 insertions(+), 453 deletions(-)
 create mode 100644 src/components/Loader/HeartLoader.module.scss
 create mode 100644 src/components/Loader/HeartLoader.tsx
 create mode 100644 src/components/Loader/LoadingPage.module.scss
 create mode 100644 src/components/Loader/LoadingPage.tsx
 create mode 100644 src/components/Modal/ModernTimeline.tsx
 create mode 100644 src/components/ModernTimeline/ModernTimelineEvent.tsx
 delete mode 100644 src/components/ModernTimeline/TextComponent.tsx

diff --git a/package-lock.json b/package-lock.json
index d9e5fb1..948c3bf 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -20,7 +20,7 @@
                 "axios": "^1.7.2",
                 "buffer": "^6.0.3",
                 "classnames": "^2.5.1",
-                "cloudinary": "^2.2.0",
+                "framer-motion": "^11.2.10",
                 "intersection-observer": "^0.12.2",
                 "keen-slider": "^6.8.6",
                 "moment-timezone": "^0.5.45",
@@ -30,7 +30,6 @@
                 "qs": "^6.12.1",
                 "react": "^18",
                 "react-archer": "^4.4.0",
-                "react-chrono": "^2.6.1",
                 "react-dom": "^18",
                 "react-query": "^3.39.3",
                 "react-redux": "^8.1.3",
@@ -1682,11 +1681,6 @@
                 "@types/react": "*"
             }
         },
-        "node_modules/@types/stylis": {
-            "version": "4.2.5",
-            "resolved": "https://registry.npmjs.org/@types/stylis/-/stylis-4.2.5.tgz",
-            "integrity": "sha512-1Xve+NMN7FWjY14vLoY5tL3BVEQ/n42YLwaqJIPYhotZ9uBHt87VceMwWQpzmdEt2TNXIorIFG+YeCUUW7RInw=="
-        },
         "node_modules/@types/use-sync-external-store": {
             "version": "0.0.3",
             "resolved": "https://registry.npmjs.org/@types/use-sync-external-store/-/use-sync-external-store-0.0.3.tgz",
@@ -2532,14 +2526,6 @@
                 "node": ">= 6"
             }
         },
-        "node_modules/camelize": {
-            "version": "1.0.1",
-            "resolved": "https://registry.npmjs.org/camelize/-/camelize-1.0.1.tgz",
-            "integrity": "sha512-dU+Tx2fsypxTgtLoE36npi3UqcjSSMNYfkqgmoEhtZrraP5VWq0K7FkWVTYa8eMPtnU/G2txVsfdCJTn9uzpuQ==",
-            "funding": {
-                "url": "https://github.com/sponsors/ljharb"
-            }
-        },
         "node_modules/caniuse-lite": {
             "version": "1.0.30001632",
             "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001632.tgz",
@@ -2628,18 +2614,6 @@
             "resolved": "https://registry.npmjs.org/client-only/-/client-only-0.0.1.tgz",
             "integrity": "sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA=="
         },
-        "node_modules/cloudinary": {
-            "version": "2.2.0",
-            "resolved": "https://registry.npmjs.org/cloudinary/-/cloudinary-2.2.0.tgz",
-            "integrity": "sha512-akbLTZcNegGSkl07Frnt9fyiK9KZ2zPS+a+j7uLrjNYxVhDpDdIBz9G6snPCYqgk+WLVMRPfXTObalLr5L6g0Q==",
-            "dependencies": {
-                "lodash": "^4.17.21",
-                "q": "^1.5.1"
-            },
-            "engines": {
-                "node": ">=9"
-            }
-        },
         "node_modules/clsx": {
             "version": "2.1.1",
             "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
@@ -2760,24 +2734,6 @@
                 "node": ">= 8"
             }
         },
-        "node_modules/css-color-keywords": {
-            "version": "1.0.0",
-            "resolved": "https://registry.npmjs.org/css-color-keywords/-/css-color-keywords-1.0.0.tgz",
-            "integrity": "sha512-FyyrDHZKEjXDpNJYvVsV960FiqQyXc/LlYmsxl2BcdMb2WPx0OGRVgTg55rPSyLSNMqP52R9r8geSp7apN3Ofg==",
-            "engines": {
-                "node": ">=4"
-            }
-        },
-        "node_modules/css-to-react-native": {
-            "version": "3.2.0",
-            "resolved": "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-3.2.0.tgz",
-            "integrity": "sha512-e8RKaLXMOFii+02mOlqwjbD00KSEKqblnpO9e++1aXS1fPQOpS1YoqdVHBqPjHNoxeF2mimzVqawm2KCbEdtHQ==",
-            "dependencies": {
-                "camelize": "^1.0.0",
-                "css-color-keywords": "^1.0.0",
-                "postcss-value-parser": "^4.0.2"
-            }
-        },
         "node_modules/cssesc": {
             "version": "3.0.0",
             "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
@@ -2790,11 +2746,6 @@
                 "node": ">=4"
             }
         },
-        "node_modules/cssfilter": {
-            "version": "0.0.10",
-            "resolved": "https://registry.npmjs.org/cssfilter/-/cssfilter-0.0.10.tgz",
-            "integrity": "sha512-FAaLDaplstoRsDR8XGYH51znUN0UY7nMc6Z9/fvE8EXGwvJE9hu7W2vHwx1+bd6gCYnln9nLbzxFTrcO9YQDZw=="
-        },
         "node_modules/csstype": {
             "version": "3.1.3",
             "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
@@ -2857,11 +2808,6 @@
                 "url": "https://github.com/sponsors/ljharb"
             }
         },
-        "node_modules/dayjs": {
-            "version": "1.11.11",
-            "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.11.tgz",
-            "integrity": "sha512-okzr3f11N6WuqYtZSvm+F776mB41wRZMhKP+hc34YdW+KmtYYK9iqvHSwo2k9FEH3fhGXvOPV6yz2IcSrfRUDg=="
-        },
         "node_modules/debug": {
             "version": "4.3.4",
             "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
@@ -3776,11 +3722,6 @@
             "integrity": "sha512-X8cqMLLie7KsNUDSdzeN8FYK9rEt4Dt67OsG/DNGnYTSDBG4uFAJFBnUeiV+zCVAvwFy56IjM9sH51jVaEhNxw==",
             "dev": true
         },
-        "node_modules/focus-visible": {
-            "version": "5.2.0",
-            "resolved": "https://registry.npmjs.org/focus-visible/-/focus-visible-5.2.0.tgz",
-            "integrity": "sha512-Rwix9pBtC1Nuy5wysTmKy+UjbDJpIfg8eHjw0rjZ1mX4GNLz1Bmd16uDpI3Gk1i70Fgcs8Csg2lPm8HULFg9DQ=="
-        },
         "node_modules/follow-redirects": {
             "version": "1.15.6",
             "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.6.tgz",
@@ -3838,6 +3779,30 @@
                 "node": ">= 6"
             }
         },
+        "node_modules/framer-motion": {
+            "version": "11.2.10",
+            "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-11.2.10.tgz",
+            "integrity": "sha512-/gr3PLZUVFCc86a9MqCUboVrALscrdluzTb3yew+2/qKBU8CX6nzs918/SRBRCqaPbx0TZP10CB6yFgK2C5cYQ==",
+            "dependencies": {
+                "tslib": "^2.4.0"
+            },
+            "peerDependencies": {
+                "@emotion/is-prop-valid": "*",
+                "react": "^18.0.0",
+                "react-dom": "^18.0.0"
+            },
+            "peerDependenciesMeta": {
+                "@emotion/is-prop-valid": {
+                    "optional": true
+                },
+                "react": {
+                    "optional": true
+                },
+                "react-dom": {
+                    "optional": true
+                }
+            }
+        },
         "node_modules/fs.realpath": {
             "version": "1.0.0",
             "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
@@ -4901,11 +4866,6 @@
                 "url": "https://github.com/sponsors/sindresorhus"
             }
         },
-        "node_modules/lodash": {
-            "version": "4.17.21",
-            "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
-            "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
-        },
         "node_modules/lodash.merge": {
             "version": "4.6.2",
             "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
@@ -5592,6 +5552,7 @@
             "version": "8.4.38",
             "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.38.tgz",
             "integrity": "sha512-Wglpdk03BSfXkHoQa3b/oulrotAkwrlLDRSOb9D0bN86FdRyE9lppSp33aHNPgBa0JKCoB+drFLZkQoRRYae5A==",
+            "dev": true,
             "funding": [
                 {
                     "type": "opencollective",
@@ -5733,7 +5694,8 @@
         "node_modules/postcss-value-parser": {
             "version": "4.2.0",
             "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
-            "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ=="
+            "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
+            "dev": true
         },
         "node_modules/preact": {
             "version": "10.22.0",
@@ -5792,15 +5754,6 @@
                 "node": ">=6"
             }
         },
-        "node_modules/q": {
-            "version": "1.5.1",
-            "resolved": "https://registry.npmjs.org/q/-/q-1.5.1.tgz",
-            "integrity": "sha512-kV/CThkXo6xyFEZUugw/+pIOywXcDbFYgSct5cT3gqlbkBE1SJdwy6UQoZvodiWF/ckQLZyDE/Bu1M6gVu5lVw==",
-            "engines": {
-                "node": ">=0.6.0",
-                "teleport": ">=0.2.0"
-            }
-        },
         "node_modules/qs": {
             "version": "6.12.1",
             "resolved": "https://registry.npmjs.org/qs/-/qs-6.12.1.tgz",
@@ -5869,23 +5822,6 @@
                 "react": "^16.9.0 || ^17 || ^18"
             }
         },
-        "node_modules/react-chrono": {
-            "version": "2.6.1",
-            "resolved": "https://registry.npmjs.org/react-chrono/-/react-chrono-2.6.1.tgz",
-            "integrity": "sha512-9KcREgRaUd39rjNjFqP9OiDUWWpu8pBoPcfZGPQoXlpmBjrN10BMmb2StHNcyWrpIFvpG4Ok4Dh1pRv1cuTuWg==",
-            "dependencies": {
-                "classnames": "^2.5.1",
-                "dayjs": "^1.11.10",
-                "focus-visible": "^5.2.0",
-                "styled-components": "^6.1.8",
-                "use-debounce": "^10.0.0",
-                "xss": "^1.0.15"
-            },
-            "peerDependencies": {
-                "react": "^18.1.0",
-                "react-dom": "^18.1.0"
-            }
-        },
         "node_modules/react-dom": {
             "version": "18.3.1",
             "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz",
@@ -6349,11 +6285,6 @@
                 "node": ">= 0.4"
             }
         },
-        "node_modules/shallowequal": {
-            "version": "1.1.0",
-            "resolved": "https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz",
-            "integrity": "sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ=="
-        },
         "node_modules/sharp": {
             "version": "0.33.4",
             "resolved": "https://registry.npmjs.org/sharp/-/sharp-0.33.4.tgz",
@@ -6694,38 +6625,6 @@
                 "url": "https://github.com/sponsors/sindresorhus"
             }
         },
-        "node_modules/styled-components": {
-            "version": "6.1.11",
-            "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-6.1.11.tgz",
-            "integrity": "sha512-Ui0jXPzbp1phYij90h12ksljKGqF8ncGx+pjrNPsSPhbUUjWT2tD1FwGo2LF6USCnbrsIhNngDfodhxbegfEOA==",
-            "dependencies": {
-                "@emotion/is-prop-valid": "1.2.2",
-                "@emotion/unitless": "0.8.1",
-                "@types/stylis": "4.2.5",
-                "css-to-react-native": "3.2.0",
-                "csstype": "3.1.3",
-                "postcss": "8.4.38",
-                "shallowequal": "1.1.0",
-                "stylis": "4.3.2",
-                "tslib": "2.6.2"
-            },
-            "engines": {
-                "node": ">= 16"
-            },
-            "funding": {
-                "type": "opencollective",
-                "url": "https://opencollective.com/styled-components"
-            },
-            "peerDependencies": {
-                "react": ">= 16.8.0",
-                "react-dom": ">= 16.8.0"
-            }
-        },
-        "node_modules/styled-components/node_modules/stylis": {
-            "version": "4.3.2",
-            "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.3.2.tgz",
-            "integrity": "sha512-bhtUjWd/z6ltJiQwg0dUfxEJ+W+jdqQd8TbWLWyeIJHlnsqmGLRFFd8e5mA0AZi/zx90smXRlN66YMTcaSFifg=="
-        },
         "node_modules/styled-jsx": {
             "version": "5.1.1",
             "resolved": "https://registry.npmjs.org/styled-jsx/-/styled-jsx-5.1.1.tgz",
@@ -7204,17 +7103,6 @@
                 }
             }
         },
-        "node_modules/use-debounce": {
-            "version": "10.0.1",
-            "resolved": "https://registry.npmjs.org/use-debounce/-/use-debounce-10.0.1.tgz",
-            "integrity": "sha512-0uUXjOfm44e6z4LZ/woZvkM8FwV1wiuoB6xnrrOmeAEjRDDzTLQNRFtYHvqUsJdrz1X37j0rVGIVp144GLHGKg==",
-            "engines": {
-                "node": ">= 16.0.0"
-            },
-            "peerDependencies": {
-                "react": ">=16.8.0"
-            }
-        },
         "node_modules/use-sync-external-store": {
             "version": "1.2.2",
             "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.2.tgz",
@@ -7530,26 +7418,6 @@
             "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
             "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ=="
         },
-        "node_modules/xss": {
-            "version": "1.0.15",
-            "resolved": "https://registry.npmjs.org/xss/-/xss-1.0.15.tgz",
-            "integrity": "sha512-FVdlVVC67WOIPvfOwhoMETV72f6GbW7aOabBC3WxN/oUdoEMDyLz4OgRv5/gck2ZeNqEQu+Tb0kloovXOfpYVg==",
-            "dependencies": {
-                "commander": "^2.20.3",
-                "cssfilter": "0.0.10"
-            },
-            "bin": {
-                "xss": "bin/xss"
-            },
-            "engines": {
-                "node": ">= 0.10.0"
-            }
-        },
-        "node_modules/xss/node_modules/commander": {
-            "version": "2.20.3",
-            "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
-            "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ=="
-        },
         "node_modules/yallist": {
             "version": "4.0.0",
             "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
diff --git a/package.json b/package.json
index 2dea4db..fc49099 100644
--- a/package.json
+++ b/package.json
@@ -21,6 +21,7 @@
         "axios": "^1.7.2",
         "buffer": "^6.0.3",
         "classnames": "^2.5.1",
+        "framer-motion": "^11.2.10",
         "intersection-observer": "^0.12.2",
         "keen-slider": "^6.8.6",
         "moment-timezone": "^0.5.45",
diff --git a/src/app/(page)/albums/page.tsx b/src/app/(page)/albums/page.tsx
index 3fef35c..c2a9542 100644
--- a/src/app/(page)/albums/page.tsx
+++ b/src/app/(page)/albums/page.tsx
@@ -1,6 +1,7 @@
 'use client';
 import styles from '@/components/Albums/Albums.module.scss';
 import SlideMultipleItems from '@/components/Albums/Slider/Slider';
+import HeartLoader from '@/components/Loader/HeartLoader';
 import Timeline from '@/components/Timeline/Timeline';
 import { get } from '@/libs/axiosConfig';
 import { fetchDataMoments } from '@/libs/fetchData';
@@ -24,8 +25,13 @@ export default function Albums(params: AlbumsProps) {
         dispatch(findAllListImageByYears({ years: 2023 }));
         dispatch(findAllListImageByYears({ years: 2024 }));
     }, [dispatch]);
+
     return isLoading ? (
-        <div>Lỗi đang tải...</div>
+        <div id="albums-scroll" className={cx('albums')}>
+            <div className={cx('relative w-full h-full flex items-center justify-center')}>
+                <HeartLoader />
+            </div>
+        </div>
     ) : (
         <div id="albums-scroll" className={cx('albums')}>
             <div className={cx('albums-outstanding')}>
diff --git a/src/app/(page)/layout.tsx b/src/app/(page)/layout.tsx
index e5ba3b7..48b2632 100644
--- a/src/app/(page)/layout.tsx
+++ b/src/app/(page)/layout.tsx
@@ -3,16 +3,17 @@ import BackToTopButton from '@/components/BackToTop/BackToTop';
 import Footer from '@/components/common/Footer/Footer';
 import Header from '@/components/common/Header/page';
 import HeartCreator from '@/components/Home/HeartCreator';
+import LoadingPage from '@/components/Loader/LoadingPage';
 import { useAppDispatch, useAppSelector } from '@/libs/hook';
 import { initHearts } from '@/redux/features/heartSlice';
 import { usePathname } from 'next/navigation';
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
 
 export default function ComponentConnectLayout({ children }: { children: React.ReactNode }) {
     const pathname = usePathname();
     const selector = useAppSelector((state) => state.heart);
     const dispatch = useAppDispatch();
-
+    const [isOpenPage, setOpenPage] = useState(false);
     useEffect(() => {
         if (typeof window !== 'undefined') {
             const isRemoveHearts = localStorage.getItem('isRemoved');
@@ -29,12 +30,20 @@ export default function ComponentConnectLayout({ children }: { children: React.R
     return pathname === '/albums' ? (
         children
     ) : (
-        <>
-            <Header />
-            {children}
-            {selector.status ? <HeartCreator /> : ''}
-            <BackToTopButton />
-            <Footer />
-        </>
+        <LoadingPage
+            isState={(e) => {
+                setOpenPage(e);
+            }}
+        >
+            {isOpenPage && (
+                <>
+                    <Header />
+                    {children}
+                    {selector.status ? <HeartCreator /> : ''}
+                    <BackToTopButton />
+                    <Footer />
+                </>
+            )}
+        </LoadingPage>
     );
 }
diff --git a/src/app/(page)/page.tsx b/src/app/(page)/page.tsx
index f25424c..e691bbf 100644
--- a/src/app/(page)/page.tsx
+++ b/src/app/(page)/page.tsx
@@ -7,7 +7,6 @@ import Image from 'next/image';
 import { useEffect, useRef, useState } from 'react';
 import { calculateTimeDifference } from '@/utils/calculateTimeDifference';
 import useIsInViewport from '@/hooks/useIsInViewport';
-import { updateElementClass } from '@/utils/updateElementClass';
 import Title from '@/components/Text/Title';
 import ImageBanner from '@/components/Image/ImageBanner';
 import Albums from '@/components/Home/HomeAlbums/HomeAlbums';
@@ -15,10 +14,7 @@ import ModernTimeline from '@/components/ModernTimeline/ModernTimeline';
 const cx = classNames.bind(styles);
 export default function Home() {
     const [timeDifference, setTimeDifference] = useState(calculateTimeDifference());
-    const refBannerLeft = useRef<HTMLDivElement | null>(null);
-    const refBannerRight = useRef<HTMLDivElement | null>(null);
-    const isInViewportBannerLeft = useIsInViewport(refBannerLeft);
-    const isInViewportBannerRight = useIsInViewport(refBannerRight);
+
     useEffect(() => {
         const interval = setInterval(() => {
             setTimeDifference(calculateTimeDifference());
@@ -27,29 +23,12 @@ export default function Home() {
         return () => clearInterval(interval);
     }, []);
 
-    useEffect(() => {
-        updateElementClass(
-            refBannerLeft.current,
-            isInViewportBannerLeft,
-            'animate__fadeInTopLeft',
-            'animate__fadeOutTopLeft',
-        );
-        updateElementClass(
-            refBannerRight.current,
-            isInViewportBannerRight,
-            'animate__fadeInTopRight',
-            'animate__fadeOutTopRight',
-        );
-    }, [isInViewportBannerLeft, isInViewportBannerRight]);
-
     return (
         <div className={cx('wrapper', 'mt-8')}>
             <div className={cx('wrapper-banner', 'flex items-center justify-around')}>
                 <ImageBanner
                     id="BannerLeft"
-                    isViewPort={isInViewportBannerLeft}
                     src={images.bannerCoupleLeft}
-                    refBanner={refBannerLeft}
                 />
                 <div className={cx('wrapper-banner-ImgCenter')}>
                     <Image
@@ -63,9 +42,7 @@ export default function Home() {
                 </div>
                 <ImageBanner
                     id="BannerRight"
-                    isViewPort={isInViewportBannerRight}
                     src={images.bannerCoupleRight}
-                    refBanner={refBannerRight}
                 />
             </div>
             <div className={cx('wrapper_NumberOfDays', 'flex items-center mt-4')}>
@@ -99,7 +76,7 @@ export default function Home() {
                     </div>
                 </div>
                 <div className="w-2/4 flex items-center justify-center my-4">
-                    <video width={300} height={500} autoPlay muted loop>
+                    <video className={cx('wrapper_NumberOfDays-video')} width={300} height={500} autoPlay muted loop>
                         <source
                             src={
                                 'https://firebasestorage.googleapis.com/v0/b/couple-85135.appspot.com/o/Albums%2F1686372287426.mp4?alt=media&token=f01df81a-8e50-431a-b2a3-fdd1539dd459'
diff --git a/src/components/Home/HomeAlbums/HomeAlbums.tsx b/src/components/Home/HomeAlbums/HomeAlbums.tsx
index 147d0ba..ff8ef51 100644
--- a/src/components/Home/HomeAlbums/HomeAlbums.tsx
+++ b/src/components/Home/HomeAlbums/HomeAlbums.tsx
@@ -7,7 +7,7 @@ export default function Albums(params: AlbumsProps) {
     return (
         <div className={cx('grid', 'my-4')}>
             <p className={cx('grid-title')}>Ảnh đi chơi nè!</p>
-            <div className={cx('grid-container')}>
+            <div className={cx('grid-container','mt-4')}>
                 {images.map((image, index) => (
                     <div key={index}>
                         <img
@@ -20,9 +20,9 @@ export default function Albums(params: AlbumsProps) {
                     </div>
                 ))}
             </div>
-            <div className={cx('grid-footer')}>
+            <a href="/albums" className={cx('grid-footer')}>
                 <p>Xem thêm</p>
-            </div>
+            </a>
         </div>
     );
 }
diff --git a/src/components/Home/home.module.scss b/src/components/Home/home.module.scss
index 6b754ae..d77f899 100644
--- a/src/components/Home/home.module.scss
+++ b/src/components/Home/home.module.scss
@@ -1,12 +1,12 @@
-.wrapper{
-    &-banner{
-        &-ImgCenter{
+.wrapper {
+    &-banner {
+        &-ImgCenter {
             width: 750px;
             position: relative;
             display: flex;
             align-items: center;
             justify-content: center;
-            &-dateStart{
+            &-dateStart {
                 position: absolute;
                 font-size: 5.9rem;
                 font-family: var(--font-style);
@@ -15,22 +15,23 @@
                 font-style: normal;
                 top: 60px;
                 color: black;
-                box-shadow: rgba(81, 81, 81, 0.25) 0px 50px 100px -20px, rgba(106, 16, 16, 0.3) 0px 30px 60px -30px, rgba(42, 54, 66, 0.35) 0px -2px 6px 0px inset;
+                box-shadow: rgba(81, 81, 81, 0.25) 0px 50px 100px -20px, rgba(106, 16, 16, 0.3) 0px 30px 60px -30px,
+                    rgba(42, 54, 66, 0.35) 0px -2px 6px 0px inset;
                 border-radius: 10px;
             }
-            &-img{
+            &-img {
                 height: 500px;
                 width: 330px;
                 object-fit: cover;
                 box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
             }
-            &-imgBanner{
+            &-imgBanner {
                 height: 350px;
                 width: 230px;
                 object-fit: cover;
                 box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
                 border-radius: 10px;
-                &-seeMore{
+                &-seeMore {
                     border-radius: 10px;
                     display: flex;
                     align-items: center;
@@ -44,7 +45,7 @@
                     right: 0;
                     left: 0;
                     z-index: 1000;
-                    &-btn{
+                    &-btn {
                         color: black;
                         border: 1px solid black;
                         background-color: white;
@@ -52,7 +53,7 @@
                         padding: 5px 20px;
                         font-weight: 600;
                         border-radius: 5px;
-                        &:hover{
+                        &:hover {
                             cursor: pointer;
                             background-color: black;
                             color: white;
@@ -60,13 +61,12 @@
                     }
                 }
             }
-            
         }
     }
-    &_NumberOfDays{
+    &_NumberOfDays {
         background: url(https://utfs.io/f/46d8bcf5-fe05-4a08-923f-f6a56c2a8b02-m15jgy.jpg);
         object-fit: contain;
-        &-title{
+        &-title {
             font-family: var(--font-Italic);
             color: white;
             font-size: 2rem;
@@ -74,7 +74,7 @@
             font-weight: 500;
             font-style: normal;
         }
-        &-content{
+        &-content {
             font-family: var(--font-Italic);
             color: rgb(199, 197, 197);
             font-size: 2rem;
@@ -82,5 +82,9 @@
             font-weight: 500;
             font-style: normal;
         }
+        &-video {
+            border-radius: 10px;
+            box-shadow: rgb(232 18 36 / 30%) 0px 22px 70px 4px;
+        }
     }
-}
\ No newline at end of file
+}
diff --git a/src/components/Image/ImageBanner.tsx b/src/components/Image/ImageBanner.tsx
index 0508563..0d26b44 100644
--- a/src/components/Image/ImageBanner.tsx
+++ b/src/components/Image/ImageBanner.tsx
@@ -1,39 +1,49 @@
-import classNames from "classnames/bind";
-import Image from "next/image";
-import styles from "../../components/Home/home.module.scss";
-import { RefObject, useState } from "react";
-
-interface ImageProps{
-    refBanner: RefObject<HTMLDivElement>;
-    src: any,
-    isViewPort: boolean
-    id:string
+import classNames from 'classnames/bind';
+import Image from 'next/image';
+import styles from '../../components/Home/home.module.scss';
+import { RefObject, useState } from 'react';
+import { motion } from 'framer-motion';
+interface ImageProps {
+    src: any;
+    id: string;
 }
 
 const cx = classNames.bind(styles);
-export default function ImageBanner({refBanner,src,isViewPort,id}:ImageProps) {
+export default function ImageBanner({ src, id }: ImageProps) {
     const [isHovered, setIsHovered] = useState(false);
-    const [classNameZoom,setClassNameZoom] = useState<string>("");
+    const [inView, setInView] = useState(false);
+    const [classNameZoom, setClassNameZoom] = useState<string>('');
     const handleMouseEnter = () => {
-        setClassNameZoom("animate__zoomInUp")
+        setClassNameZoom('animate__zoomInUp');
         setIsHovered(true);
     };
 
     const handleMouseLeave = () => {
-        setClassNameZoom("animate__zoomOutUp")
+        setClassNameZoom('animate__zoomOutUp');
         setTimeout(() => {
             setIsHovered(true);
-        }, 300);
+        }, 100);
     };
-    
+
     return (
-        <div 
-            className="animate__animated"
-            ref={refBanner}
+        <motion.div
+            className={cx(
+                'animate__animated',
+                id === 'BannerLeft'
+                    ? inView
+                        ? 'animate__fadeInTopLeft'
+                        : 'animate__fadeOutTopLeft'
+                    : inView
+                    ? 'animate__fadeInTopRight'
+                    : 'animate__fadeOutTopRight',
+            )}
+            viewport={{ amount: 'some' }}
+            onViewportEnter={() => setInView(true)}
+            onViewportLeave={() => setInView(false)}
         >
-            <a 
-                href={id ==="BannerLeft" ? "/profiles/men" : "/profiles/women"}
-                style={{position: "relative"}}
+            <motion.a
+                href={id === 'BannerLeft' ? '/profiles/men' : '/profiles/women'}
+                style={{ position: 'relative' }}
                 onMouseEnter={handleMouseEnter}
                 onMouseLeave={handleMouseLeave}
             >
@@ -41,27 +51,28 @@ export default function ImageBanner({refBanner,src,isViewPort,id}:ImageProps) {
                     className={cx('wrapper-banner-ImgCenter-imgBanner')}
                     src={src}
                     alt="Banner Couple"
-                    style={{display: isViewPort ? "block" : "none"}}
+                    style={{ display: inView ? 'block' : 'none' }}
                 />
                 {isHovered ? (
-                    <div 
-                        className={cx('wrapper-banner-ImgCenter-imgBanner-seeMore',
-                                    'animate__animated',classNameZoom)}
+                    <div
+                        className={cx('wrapper-banner-ImgCenter-imgBanner-seeMore', 'animate__animated', classNameZoom)}
                     >
                         <div>
                             <div className="mb-4">
                                 <p className={cx('text-white text-sm font-semibold')}>
-                                    {id === "BannerLeft" ? "Nguyễn Thanh Quỳnh Linh" : "Lê Thị Kim Yến"}
+                                    {id === 'BannerLeft' ? 'Nguyễn Thanh Quỳnh Linh' : 'Lê Thị Kim Yến'}
                                 </p>
                                 <p className={cx('text-white text-xs font-semibold ')}>
-                                    {id === "BannerLeft" ? "21-06-2002" : "06-04-2002"}
+                                    {id === 'BannerLeft' ? '21-06-2002' : '06-04-2002'}
                                 </p>
                             </div>
                             <span className={cx('wrapper-banner-ImgCenter-imgBanner-seeMore-btn')}>Xem</span>
                         </div>
                     </div>
-                ) : ""}
-            </a>
-        </div>
-    )
-}
\ No newline at end of file
+                ) : (
+                    ''
+                )}
+            </motion.a>
+        </motion.div>
+    );
+}
diff --git a/src/components/Loader/HeartLoader.module.scss b/src/components/Loader/HeartLoader.module.scss
new file mode 100644
index 0000000..1532f59
--- /dev/null
+++ b/src/components/Loader/HeartLoader.module.scss
@@ -0,0 +1,297 @@
+.cssload-main {
+    position: absolute;
+    content: '';
+    left: 50%;
+    transform: translate(-100%, -240%);
+    -o-transform: translate(-100%, -240%);
+    -ms-transform: translate(-100%, -240%);
+    -webkit-transform: translate(-100%, -240%);
+    -moz-transform: translate(-100%, -240%);
+}
+
+.cssload-main * {
+    font-size: 62px;
+}
+
+.cssload-heart {
+    animation: cssload-heart 2.88s cubic-bezier(0.75, 0, 0.5, 1) infinite normal;
+    -o-animation: cssload-heart 2.88s cubic-bezier(0.75, 0, 0.5, 1) infinite normal;
+    -ms-animation: cssload-heart 2.88s cubic-bezier(0.75, 0, 0.5, 1) infinite normal;
+    -webkit-animation: cssload-heart 2.88s cubic-bezier(0.75, 0, 0.5, 1) infinite normal;
+    -moz-animation: cssload-heart 2.88s cubic-bezier(0.75, 0, 0.5, 1) infinite normal;
+    top: 50%;
+    content: '';
+    left: 50%;
+    position: absolute;
+}
+
+.cssload-heartL {
+    width: 1em;
+    height: 1em;
+    border: 1px solid rgb(237 64 83);
+    background-color: rgb(237 64 83);
+    content: '';
+    position: absolute;
+    display: block;
+    border-radius: 100%;
+    animation: cssload-heartL 2.88s cubic-bezier(0.75, 0, 0.5, 1) infinite normal;
+    -o-animation: cssload-heartL 2.88s cubic-bezier(0.75, 0, 0.5, 1) infinite normal;
+    -ms-animation: cssload-heartL 2.88s cubic-bezier(0.75, 0, 0.5, 1) infinite normal;
+    -webkit-animation: cssload-heartL 2.88s cubic-bezier(0.75, 0, 0.5, 1) infinite normal;
+    -moz-animation: cssload-heartL 2.88s cubic-bezier(0.75, 0, 0.5, 1) infinite normal;
+    transform: translate(-28px, -27px);
+    -o-transform: translate(-28px, -27px);
+    -ms-transform: translate(-28px, -27px);
+    -webkit-transform: translate(-28px, -27px);
+    -moz-transform: translate(-28px, -27px);
+}
+
+.cssload-heartR {
+    width: 1em;
+    height: 1em;
+    border: 1px solid rgb(237 64 83);
+    background-color: rgb(237 64 83);
+    content: '';
+    position: absolute;
+    display: block;
+    border-radius: 100%;
+    transform: translate(28px, -27px);
+    -o-transform: translate(28px, -27px);
+    -ms-transform: translate(28px, -27px);
+    -webkit-transform: translate(28px, -27px);
+    -moz-transform: translate(28px, -27px);
+    animation: cssload-heartR 2.88s cubic-bezier(0.75, 0, 0.5, 1) infinite normal;
+    -o-animation: cssload-heartR 2.88s cubic-bezier(0.75, 0, 0.5, 1) infinite normal;
+    -ms-animation: cssload-heartR 2.88s cubic-bezier(0.75, 0, 0.5, 1) infinite normal;
+    -webkit-animation: cssload-heartR 2.88s cubic-bezier(0.75, 0, 0.5, 1) infinite normal;
+    -moz-animation: cssload-heartR 2.88s cubic-bezier(0.75, 0, 0.5, 1) infinite normal;
+}
+
+.cssload-square {
+    width: 1em;
+    height: 1em;
+    border: 1px solid rgb(237 64 83);
+    background-color: rgb(237 64 83);
+    position: relative;
+    display: block;
+    content: '';
+    transform: scale(1) rotate(-45deg);
+    -o-transform: scale(1) rotate(-45deg);
+    -ms-transform: scale(1) rotate(-45deg);
+    -webkit-transform: scale(1) rotate(-45deg);
+    -moz-transform: scale(1) rotate(-45deg);
+    animation: cssload-square 2.88s cubic-bezier(0.75, 0, 0.5, 1) infinite normal;
+    -o-animation: cssload-square 2.88s cubic-bezier(0.75, 0, 0.5, 1) infinite normal;
+    -ms-animation: cssload-square 2.88s cubic-bezier(0.75, 0, 0.5, 1) infinite normal;
+    -webkit-animation: cssload-square 2.88s cubic-bezier(0.75, 0, 0.5, 1) infinite normal;
+    -moz-animation: cssload-square 2.88s cubic-bezier(0.75, 0, 0.5, 1) infinite normal;
+}
+
+.cssload-shadow {
+    top: 97px;
+    left: 50%;
+    content: '';
+    position: relative;
+    display: block;
+    bottom: -0.5em;
+    width: 1em;
+    height: 0.24em;
+    background-color: rgb(215, 215, 215);
+    border: 1px solid rgb(215, 215, 215);
+    border-radius: 50%;
+    animation: cssload-shadow 2.88s cubic-bezier(0.75, 0, 0.5, 1) infinite normal;
+    -o-animation: cssload-shadow 2.88s cubic-bezier(0.75, 0, 0.5, 1) infinite normal;
+    -ms-animation: cssload-shadow 2.88s cubic-bezier(0.75, 0, 0.5, 1) infinite normal;
+    -webkit-animation: cssload-shadow 2.88s cubic-bezier(0.75, 0, 0.5, 1) infinite normal;
+    -moz-animation: cssload-shadow 2.88s cubic-bezier(0.75, 0, 0.5, 1) infinite normal;
+}
+
+@keyframes cssload-square {
+    50% {
+        border-radius: 100%;
+        transform: scale(0.5) rotate(-45deg);
+    }
+    100% {
+        transform: scale(1) rotate(-45deg);
+    }
+}
+
+@-o-keyframes cssload-square {
+    50% {
+        border-radius: 100%;
+        -o-transform: scale(0.5) rotate(-45deg);
+    }
+    100% {
+        -o-transform: scale(1) rotate(-45deg);
+    }
+}
+
+@-ms-keyframes cssload-square {
+    50% {
+        border-radius: 100%;
+        -ms-transform: scale(0.5) rotate(-45deg);
+    }
+    100% {
+        -ms-transform: scale(1) rotate(-45deg);
+    }
+}
+
+@-webkit-keyframes cssload-square {
+    50% {
+        border-radius: 100%;
+        -webkit-transform: scale(0.5) rotate(-45deg);
+    }
+    100% {
+        -webkit-transform: scale(1) rotate(-45deg);
+    }
+}
+
+@-moz-keyframes cssload-square {
+    50% {
+        border-radius: 100%;
+        -moz-transform: scale(0.5) rotate(-45deg);
+    }
+    100% {
+        -moz-transform: scale(1) rotate(-45deg);
+    }
+}
+
+@keyframes cssload-heart {
+    50% {
+        transform: rotate(360deg);
+    }
+    100% {
+        transform: rotate(720deg);
+    }
+}
+
+@-o-keyframes cssload-heart {
+    50% {
+        -o-transform: rotate(360deg);
+    }
+    100% {
+        -o-transform: rotate(720deg);
+    }
+}
+
+@-ms-keyframes cssload-heart {
+    50% {
+        -ms-transform: rotate(360deg);
+    }
+    100% {
+        -ms-transform: rotate(720deg);
+    }
+}
+
+@-webkit-keyframes cssload-heart {
+    50% {
+        -webkit-transform: rotate(360deg);
+    }
+    100% {
+        -webkit-transform: rotate(720deg);
+    }
+}
+
+@-moz-keyframes cssload-heart {
+    50% {
+        -moz-transform: rotate(360deg);
+    }
+    100% {
+        -moz-transform: rotate(720deg);
+    }
+}
+
+@keyframes cssload-heartL {
+    60% {
+        transform: scale(0.4);
+    }
+}
+
+@-o-keyframes cssload-heartL {
+    60% {
+        -o-transform: scale(0.4);
+    }
+}
+
+@-ms-keyframes cssload-heartL {
+    60% {
+        -ms-transform: scale(0.4);
+    }
+}
+
+@-webkit-keyframes cssload-heartL {
+    60% {
+        -webkit-transform: scale(0.4);
+    }
+}
+
+@-moz-keyframes cssload-heartL {
+    60% {
+        -moz-transform: scale(0.4);
+    }
+}
+
+@keyframes cssload-heartR {
+    40% {
+        transform: scale(0.4);
+    }
+}
+
+@-o-keyframes cssload-heartR {
+    40% {
+        -o-transform: scale(0.4);
+    }
+}
+
+@-ms-keyframes cssload-heartR {
+    40% {
+        -ms-transform: scale(0.4);
+    }
+}
+
+@-webkit-keyframes cssload-heartR {
+    40% {
+        -webkit-transform: scale(0.4);
+    }
+}
+
+@-moz-keyframes cssload-heartR {
+    40% {
+        -moz-transform: scale(0.4);
+    }
+}
+
+@keyframes cssload-shadow {
+    50% {
+        transform: scale(0.5);
+        border-color: rgb(228, 228, 228);
+    }
+}
+
+@-o-keyframes cssload-shadow {
+    50% {
+        -o-transform: scale(0.5);
+        border-color: rgb(228, 228, 228);
+    }
+}
+
+@-ms-keyframes cssload-shadow {
+    50% {
+        -ms-transform: scale(0.5);
+        border-color: rgb(228, 228, 228);
+    }
+}
+
+@-webkit-keyframes cssload-shadow {
+    50% {
+        -webkit-transform: scale(0.5);
+        border-color: rgb(228, 228, 228);
+    }
+}
+
+@-moz-keyframes cssload-shadow {
+    50% {
+        -moz-transform: scale(0.5);
+        border-color: rgb(228, 228, 228);
+    }
+}
diff --git a/src/components/Loader/HeartLoader.tsx b/src/components/Loader/HeartLoader.tsx
new file mode 100644
index 0000000..9a2ff1e
--- /dev/null
+++ b/src/components/Loader/HeartLoader.tsx
@@ -0,0 +1,18 @@
+import React from 'react'
+import styles from "./HeartLoader.module.scss";
+import classNames from 'classnames/bind';
+const cx = classNames.bind(styles);
+function HeartLoader() {
+  return (
+      <div className={cx("cssload-main")}>
+          <div className={cx("cssload-heart")}>
+              <span className={cx("cssload-heartL")}></span>
+              <span className={cx("cssload-heartR")}></span>
+              <span className={cx("cssload-square")}></span>
+          </div>
+          <div className={cx("cssload-shadow")}></div>
+      </div>
+  );
+}
+
+export default HeartLoader
\ No newline at end of file
diff --git a/src/components/Loader/LoadingPage.module.scss b/src/components/Loader/LoadingPage.module.scss
new file mode 100644
index 0000000..a69b5f5
--- /dev/null
+++ b/src/components/Loader/LoadingPage.module.scss
@@ -0,0 +1,171 @@
+.container {
+    width: 100%;
+    height: 100%;
+    background: url(https://utfs.io/f/46d8bcf5-fe05-4a08-923f-f6a56c2a8b02-m15jgy.jpg);
+    object-fit: cover;
+}
+.cssload-preloader {
+    position: absolute;
+    top: 0px;
+    left: 0px;
+    right: 0px;
+    bottom: 0px;
+    z-index: 10;
+}
+
+.cssload-preloader > .cssload-preloader-box {
+    position: absolute;
+    height: 50px;
+    top: 50%;
+    left: 50%;
+    margin: -34px 0 0 -338px;
+    perspective: 450px;
+    -o-perspective: 450px;
+    -ms-perspective: 450px;
+    -webkit-perspective: 450px;
+    -moz-perspective: 450px;
+}
+.cssload-preloader .cssload-preloader-box > div {
+    position: relative;
+    width: 68px;
+    height: 68px;
+    background: rgb(255 65 84);
+    float: left;
+    text-align: center;
+    line-height: 68px;
+    font-family: Verdana;
+    font-size: 45px;
+    color: rgb(255, 255, 255);
+}
+.cssload-preloader .cssload-preloader-box > div:nth-child(1) {
+    background: rgb(235, 78, 93);
+    margin-right: 34px;
+    animation: cssload-movement 1680ms ease 0ms infinite alternate;
+    -o-animation: cssload-movement 1680ms ease 0ms infinite alternate;
+    -ms-animation: cssload-movement 1680ms ease 0ms infinite alternate;
+    -webkit-animation: cssload-movement 1680ms ease 0ms infinite alternate;
+    -moz-animation: cssload-movement 1680ms ease 0ms infinite alternate;
+}
+.cssload-preloader .cssload-preloader-box > div:nth-child(2) {
+    background: rgb(255 65 84);
+    margin-right: 34px;
+    animation: cssload-movement 1680ms ease 210ms infinite alternate;
+    -o-animation: cssload-movement 1680ms ease 210ms infinite alternate;
+    -ms-animation: cssload-movement 1680ms ease 210ms infinite alternate;
+    -webkit-animation: cssload-movement 1680ms ease 210ms infinite alternate;
+    -moz-animation: cssload-movement 1680ms ease 210ms infinite alternate;
+}
+.cssload-preloader .cssload-preloader-box > div:nth-child(3) {
+    background: rgb(255 65 84);
+    margin-right: 34px;
+    animation: cssload-movement 1680ms ease 420ms infinite alternate;
+    -o-animation: cssload-movement 1680ms ease 420ms infinite alternate;
+    -ms-animation: cssload-movement 1680ms ease 420ms infinite alternate;
+    -webkit-animation: cssload-movement 1680ms ease 420ms infinite alternate;
+    -moz-animation: cssload-movement 1680ms ease 420ms infinite alternate;
+}
+.cssload-preloader .cssload-preloader-box > div:nth-child(4) {
+    background: rgb(255 65 84);
+    margin-right: 34px;
+    animation: cssload-movement 1680ms ease 630ms infinite alternate;
+    -o-animation: cssload-movement 1680ms ease 630ms infinite alternate;
+    -ms-animation: cssload-movement 1680ms ease 630ms infinite alternate;
+    -webkit-animation: cssload-movement 1680ms ease 630ms infinite alternate;
+    -moz-animation: cssload-movement 1680ms ease 630ms infinite alternate;
+}
+.cssload-preloader .cssload-preloader-box > div:nth-child(5) {
+    background: rgb(255 65 84);
+    margin-right: 34px;
+    animation: cssload-movement 1680ms ease 840ms infinite alternate;
+    -o-animation: cssload-movement 1680ms ease 840ms infinite alternate;
+    -ms-animation: cssload-movement 1680ms ease 840ms infinite alternate;
+    -webkit-animation: cssload-movement 1680ms ease 840ms infinite alternate;
+    -moz-animation: cssload-movement 1680ms ease 840ms infinite alternate;
+}
+.cssload-preloader .cssload-preloader-box > div:nth-child(6) {
+    background: rgb(255 65 84);
+    margin-right: 34px;
+    animation: cssload-movement 1680ms ease 1050ms infinite alternate;
+    -o-animation: cssload-movement 1680ms ease 1050ms infinite alternate;
+    -ms-animation: cssload-movement 1680ms ease 1050ms infinite alternate;
+    -webkit-animation: cssload-movement 1680ms ease 1050ms infinite alternate;
+    -moz-animation: cssload-movement 1680ms ease 1050ms infinite alternate;
+}
+.cssload-preloader .cssload-preloader-box > div:nth-child(7) {
+    background: rgb(255 65 84);
+    margin-right: 34px;
+    animation: cssload-movement 1680ms ease 1260ms infinite alternate;
+    -o-animation: cssload-movement 1680ms ease 1260ms infinite alternate;
+    -ms-animation: cssload-movement 1680ms ease 1260ms infinite alternate;
+    -webkit-animation: cssload-movement 1680ms ease 1260ms infinite alternate;
+    -moz-animation: cssload-movement 1680ms ease 1260ms infinite alternate;
+}
+.cssload-preloader .cssload-preloader-box > div:nth-child(8) {
+    background: rgb(255 65 84);
+    margin-right: 34px;
+    animation: cssload-movement 1680ms ease 1470ms infinite alternate;
+    -o-animation: cssload-movement 1680ms ease 1470ms infinite alternate;
+    -ms-animation: cssload-movement 1680ms ease 1470ms infinite alternate;
+    -webkit-animation: cssload-movement 1680ms ease 1470ms infinite alternate;
+    -moz-animation: cssload-movement 1680ms ease 1470ms infinite alternate;
+}
+// KEY FRAMES
+@keyframes cssload-movement {
+    from {
+        transform: scale(1) translateY(0px) rotateX(0deg);
+        box-shadow: 0 0 0 rgba(0, 0, 0, 0);
+    }
+    to {
+        transform: scale(1.5) translateY(-56px) rotateX(45deg);
+        box-shadow: 0 56px 90px rgb(0, 0, 0);
+        background: var(--background-color);
+    }
+}
+
+@-o-keyframes cssload-movement {
+    from {
+        -o-transform: scale(1) translateY(0px) rotateX(0deg);
+        box-shadow: 0 0 0 rgba(0, 0, 0, 0);
+    }
+    to {
+        -o-transform: scale(1.5) translateY(-56px) rotateX(45deg);
+        box-shadow: 0 56px 90px rgb(0, 0, 0);
+        background: var(--background-color);
+    }
+}
+
+@-ms-keyframes cssload-movement {
+    from {
+        -ms-transform: scale(1) translateY(0px) rotateX(0deg);
+        box-shadow: 0 0 0 rgba(0, 0, 0, 0);
+    }
+    to {
+        -ms-transform: scale(1.5) translateY(-56px) rotateX(45deg);
+        box-shadow: 0 56px 90px rgb(0, 0, 0);
+        background: var(--background-color);
+    }
+}
+
+@-webkit-keyframes cssload-movement {
+    from {
+        -webkit-transform: scale(1) translateY(0px) rotateX(0deg);
+        box-shadow: 0 0 0 rgba(0, 0, 0, 0);
+    }
+    to {
+        -webkit-transform: scale(1.5) translateY(-56px) rotateX(45deg);
+        box-shadow: 0 56px 90px rgb(0, 0, 0);
+        background: var(--background-color);
+    }
+}
+
+@-moz-keyframes cssload-movement {
+    from {
+        -moz-transform: scale(1) translateY(0px) rotateX(0deg);
+        box-shadow: 0 0 0 rgba(0, 0, 0, 0);
+    }
+    to {
+        -moz-transform: scale(1.5) translateY(-56px) rotateX(45deg);
+        box-shadow: 0 56px 90px rgb(0, 0, 0);
+        background: var(--background-color);
+    }
+}
diff --git a/src/components/Loader/LoadingPage.tsx b/src/components/Loader/LoadingPage.tsx
new file mode 100644
index 0000000..8fbdbd6
--- /dev/null
+++ b/src/components/Loader/LoadingPage.tsx
@@ -0,0 +1,40 @@
+import className from 'classnames/bind';
+import { useState, useEffect, ReactNode } from 'react';
+import styles from './LoadingPage.module.scss';
+
+interface LoadingPageProps {
+    isState?: (state: boolean) => void;
+    children: ReactNode;
+}
+const LoadingPage = ({ isState = () => {}, children }: LoadingPageProps) => {
+    const cx = className.bind(styles);
+    const [isLoading, setIsLoading] = useState(true);
+    useEffect(() => {
+        const timer = setTimeout(() => {
+            setIsLoading(false);
+            isState(true);
+        }, 3000);
+
+        return () => clearTimeout(timer);
+    }, []);
+
+    return isLoading ? (
+        <div className={cx('container')}>
+            <div className={cx('cssload-preloader')}>
+                <div className={cx('cssload-preloader-box')}>
+                    <div>L</div>
+                    <div>I</div>
+                    <div>N</div>
+                    <div>H</div>
+                    <div>&</div>
+                    <div>Y</div>
+                    <div>E</div>
+                    <div>N</div>
+                </div>
+            </div>
+        </div>
+    ) : (
+        children
+    );
+};
+export default LoadingPage;
diff --git a/src/components/Modal/ModernTimeline.tsx b/src/components/Modal/ModernTimeline.tsx
new file mode 100644
index 0000000..ed4acb9
--- /dev/null
+++ b/src/components/Modal/ModernTimeline.tsx
@@ -0,0 +1,66 @@
+import React, { useEffect, useState } from 'react';
+import Box from '@mui/material/Box';
+import Modal from '@mui/material/Modal';
+import styles from '@/components/ModernTimeline/ModernTimeline.module.scss';
+import classNames from 'classnames/bind';
+const style = {
+    position: 'absolute' as 'absolute',
+    top: '50%',
+    left: '50%',
+    transform: 'translate(-50%, -50%)',
+    width: 600,
+};
+interface ModernTimelineModalProps {
+    isOpen: boolean;
+    onClose: Function;
+    data: any;
+}
+
+const cx = classNames.bind(styles);
+export default function ModernTimelineModal({ isOpen, onClose, data }: ModernTimelineModalProps) {
+    const [open, setOpen] = useState(false);
+
+    const handleClose = () => {
+        setOpen(false);
+        onClose(false);
+    };
+    useEffect(() => {
+        if (isOpen) {
+            setOpen(true);
+        } else {
+            const timer = setTimeout(() => {
+                setOpen(false);
+            }, 1000);
+            return () =>  clearTimeout(timer);
+        }
+    }, [isOpen]);
+    return (
+        <Modal
+            aria-labelledby="transition-modal-title"
+            aria-describedby="transition-modal-description"
+            disablePortal
+            disableEnforceFocus
+            disableAutoFocus
+            open={open}
+            onClose={handleClose}
+            closeAfterTransition
+        >
+            <Box className={cx()} sx={style}>
+                <div
+                    className={cx(
+                        'modernTimeLine-content',
+                        'animate__animated',
+                        isOpen ? 'animate__flipInX' : 'animate__flipOutX',
+                    )}
+                >
+                    <h1>{data.title}</h1>
+                    <p className="text-xs font-normal">{data.subtitle}</p>
+                    <div className="mt-4 flex items-center justify-start">
+                        <img src={data.imgSrc} alt={data.imgAlt} />
+                        <p className="ml-2 text-xs font-italic text-justify">{data.description}</p>
+                    </div>
+                </div>
+            </Box>
+        </Modal>
+    );
+}
diff --git a/src/components/ModernTimeline/ModernTimeline.module.scss b/src/components/ModernTimeline/ModernTimeline.module.scss
index d87c4e9..c8517fc 100644
--- a/src/components/ModernTimeline/ModernTimeline.module.scss
+++ b/src/components/ModernTimeline/ModernTimeline.module.scss
@@ -10,8 +10,11 @@
         background-clip: text;
         color: white;
     }
+    &-titleHover {
+        color: #e81224 !important;
+    }
     &-titleTimeLine {
-        font-family: var(--font-style);
+        font-family: var(--font-style) !important;
         color: white;
         font-size: 17px;
         font-weight: 600;
@@ -24,14 +27,17 @@
         border-radius: 5px;
         box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
         & h1 {
-            color: #e81224;
+            color: rgb(232, 18, 36);
             font-weight: 500;
         }
-        & img{
+        & img {
             border-radius: 5px;
             width: 160px;
             height: 160px;
             object-fit: cover;
         }
     }
+    &-contentHover {
+        box-shadow: rgb(232, 18, 36,0.5) 0px 5px 15px !important;
+    }
 }
diff --git a/src/components/ModernTimeline/ModernTimeline.tsx b/src/components/ModernTimeline/ModernTimeline.tsx
index 06829f5..dd47e1b 100644
--- a/src/components/ModernTimeline/ModernTimeline.tsx
+++ b/src/components/ModernTimeline/ModernTimeline.tsx
@@ -1,192 +1,80 @@
-import * as React from 'react';
+import React from 'react';
 import Timeline from '@mui/lab/Timeline';
-import TimelineItem from '@mui/lab/TimelineItem';
-import TimelineSeparator from '@mui/lab/TimelineSeparator';
-import TimelineConnector from '@mui/lab/TimelineConnector';
-import TimelineContent from '@mui/lab/TimelineContent';
-import TimelineOppositeContent from '@mui/lab/TimelineOppositeContent';
 import classNames from 'classnames/bind';
 import styles from './ModernTimeline.module.scss';
-import useIsInViewport from '@/hooks/useIsInViewport';
-import { updateElementClass } from '@/utils/updateElementClass';
-const cx = classNames.bind(styles);
-export default function OppositeContentTimeline() {
-    const refFirstDate = React.useRef<HTMLDivElement | null>(null);
-    const refTravel = React.useRef<HTMLDivElement | null>(null);
-    const refOneYear = React.useRef<HTMLDivElement | null>(null);
-    const refSixMonths = React.useRef<HTMLDivElement | null>(null);
-    const isInViewportFirstDate = useIsInViewport(refFirstDate);
-    const isInViewportTravel = useIsInViewport(refTravel);
-    const isInViewportOneYear = useIsInViewport(refOneYear);
-    const isInViewportSixMonths = useIsInViewport(refSixMonths);
-
-    React.useEffect(() => {
-        if (isInViewportFirstDate) {
-            refFirstDate.current?.classList.add('animate__backInRight');
-        }
-    }, [isInViewportFirstDate]);
-
-    React.useEffect(() => {
-        if (isInViewportTravel) {
-            refTravel.current?.classList.add('animate__backInLeft');
-        }
-    }, [isInViewportTravel]);
-    React.useEffect(() => {
-        if (isInViewportOneYear) {
-            refOneYear.current?.classList.add('animate__backInLeft');
-        }
-    }, [isInViewportOneYear]);
-    React.useEffect(() => {
-        if (isInViewportSixMonths) {
-            refSixMonths.current?.classList.add('animate__backInRight');
-        }
-    }, [isInViewportSixMonths]);
+import ModernTimelineEvent from './ModernTimelineEvent';
 
+const cx = classNames.bind(styles);
+const DataModernTimeline = [
+    {
+        id: '1',
+        date: 'Ngày 26 tháng 04 năm 2023',
+        title: 'First Date',
+        subtitle: '(On a beautiful evening at the cafe)',
+        description:
+            'On the evening of April 26, 2023, under a serene night sky, two hearts found themselves at a quaint cafe, embarking on a magical first date. The soft glow of dim lights intertwined with the aroma of freshly brewed coffee, creating an atmosphere that whispered of possibilities. Amidst shared laughter and heartfelt conversations, they discovered common interests and dreams, forging a bond that felt both familiar and exhilaratingly new. Time seemed to pause as they exchanged stories, their eyes reflecting a growing connection under the gentle moonlight. This evening marked the beginning of a journey filled with hope, anticipation, and the promise of many more cherished moments together.',
+        imgSrc: 'https://firebasestorage.googleapis.com/v0/b/couple-85135.appspot.com/o/IMG_4964.JPG?alt=media&token=dcac4dbb-60ae-4888-a7ac-99682bf1bf9e',
+        imgAlt: 'First Date',
+        position: 'right',
+    },
+    {
+        id: '2',
+        date: 'Ngày 09 tháng 08 năm 2023',
+        title: 'Travel to Vung Tau',
+        subtitle: '(Went by motorbike at 10 am with nice weather)',
+        description:
+            'Nestled along Vietnam scenic coastline, Vung Tau beckons with its tranquil charm and inviting seascape. A getaway to this coastal gem promises moments of serenity and culinary delight. Imagine strolling along the sun-kissed shores, waves gently lapping at your feet as you indulge in crispy fried fish balls and sip on aromatic coffee by the beach. Vung Tau is allure extends beyond its sandy beaches; it is a haven for seafood enthusiasts. Savour the freshness of local delicacies like succulent grilled squid and briny oysters, each dish a testament to the region is rich maritime bounty. As evening falls, the sea breeze carries whispers of relaxation, a perfect backdrop for recounting tales and forging cherished memories. Vung Tau, where every moment is a feast for the senses and a celebration of coastal splendour.',
+        imgSrc: 'https://firebasestorage.googleapis.com/v0/b/couple-85135.appspot.com/o/1d7fc2326c8698e8bf2206d32b5d941d.jpg?alt=media&token=5cefb461-ffc9-402c-a95d-95426445383d',
+        imgAlt: 'Travel to Vung Tau',
+        position: 'left',
+    },
+    {
+        id: '3',
+        date: 'Ngày 26 tháng 10 năm 2023',
+        title: '6 Months Anniversary',
+        description:
+            'Six months into our journey together, we celebrated with a memorable evening at a charming Korean restaurant. The cozy ambiance and savory aromas welcomed us as we savored crispy fried chicken with a delightful crunchy corn coating. Each bite was a celebration of our growing bond, filled with laughter and shared stories. Later, we ventured to a nearby cafe with a breathtaking view, where city lights shimmered like stars against the night sky. Sipping on aromatic teas, we reminisced about our favorite moments and dreams for the future. The beauty of the evening mirrored the beauty of our relationship, each moment etched in our hearts as a testament to love and companionship.',
+        subtitle: '(Go eat at a Korean restaurant)',
+        imgSrc: 'https://firebasestorage.googleapis.com/v0/b/couple-85135.appspot.com/o/IMG_9574.jpg?alt=media&token=b10d7c1a-c46e-4f6c-a857-ca59b89f1a2e',
+        imgAlt: '6 Months Anniversary',
+        position: 'right',
+    },
+    {
+        id: '4',
+        date: 'Ngày 26 tháng 04 năm 2024',
+        title: 'One year of knowing each other',
+        subtitle: '(Go for a drink at a restaurant with a rooftop view)',
+        description:
+            'On our first anniversary together, we decided to celebrate with a delightful evening starting at a rooftop café with stunning city views. As we sipped on refreshing drinks under the twinkling evening sky, we reflected on our journey over the past year—filled with laughter, challenges, and cherished moments. The city lights formed a mesmerizing backdrop to our conversation, highlighting the beauty of the moment. Following our drinks, we ventured to a cozy restaurant renowned for its grilled beef, a place we discovered through a TikTok video. The aroma of sizzling meat filled the air as we settled into a cozy corner, exchanging glances filled with affection and reminiscing about our favorite memories together. The tender beef, perfectly seasoned and grilled to perfection, served as a delicious symbol of our enduring love and shared adventures. As the evening unfolded, we toasted to many more years of happiness and exploration, grateful for the serendipitous moments that brought us closer and excited for the future yet to unfold.',
+        imgSrc: 'https://firebasestorage.googleapis.com/v0/b/couple-85135.appspot.com/o/IMG_0489.jpg?alt=media&token=8d35f5c4-1474-4f35-9971-e32259e24bea',
+        imgAlt: 'One year of knowing each other',
+        position: 'left',
+    },
+];
+const OppositeContentTimeline: React.FC = () => {
     return (
         <div className={cx('modernTimeLine')}>
             <div className="text-center">
                 <h1 className={cx('modernTimeLine-title')}>Câu Chuyện</h1>
             </div>
             <Timeline position="alternate">
-                {/* First Date */}
-                <TimelineItem className="animate__animated" ref={refFirstDate}>
-                    <TimelineOppositeContent className={cx('modernTimeLine-titleTimeLine')} color="text.secondary">
-                        Ngày 26 tháng 04 năm 2023
-                    </TimelineOppositeContent>
-                    <TimelineSeparator>
-                        <p>💗</p>
-                        <TimelineConnector />
-                    </TimelineSeparator>
-                    <TimelineContent>
-                        <div className={cx('modernTimeLine-content')}>
-                            <h1>First Date</h1>
-                            <p className="text-xs font-normal">(On a beautiful evening at the cafe)</p>
-                            <div className="mt-4 flex items-center justify-start">
-                                <img
-                                    src="https://firebasestorage.googleapis.com/v0/b/couple-85135.appspot.com/o/IMG_4964.JPG?alt=media&token=dcac4dbb-60ae-4888-a7ac-99682bf1bf9e"
-                                    alt="First Date"
-                                />
-                                <p className="ml-2 text-xs font-italic text-justify">
-                                    On the evening of April 26, 2023, under a serene night sky, two hearts found
-                                    themselves at a quaint cafe, embarking on a magical first date. The soft glow of dim
-                                    lights intertwined with the aroma of freshly brewed coffee, creating an atmosphere
-                                    that whispered of possibilities. Amidst shared laughter and heartfelt conversations,
-                                    they discovered common interests and dreams, forging a bond that felt both familiar
-                                    and exhilaratingly new. Time seemed to pause as they exchanged stories, their eyes
-                                    reflecting a growing connection under the gentle moonlight. This evening marked the
-                                    beginning of a journey filled with hope, anticipation, and the promise of many more
-                                    cherished moments together.
-                                </p>
-                            </div>
-                        </div>
-                    </TimelineContent>
-                </TimelineItem>
-                {/* Travel */}
-                <TimelineItem className="animate__animated" ref={refTravel}>
-                    <TimelineOppositeContent className={cx('modernTimeLine-titleTimeLine')} color="text.secondary">
-                        Ngày 09 tháng 08 năm 2023
-                    </TimelineOppositeContent>
-                    <TimelineSeparator>
-                        <p>💗</p>
-                        <TimelineConnector />
-                    </TimelineSeparator>
-                    <TimelineContent>
-                        <div className={cx('modernTimeLine-content')}>
-                            <h1>Travel to Vung Tau</h1>
-                            <p className="text-xs font-normal">(Went by motorbike at 10 am with nice weather)</p>
-                            <div className="mt-4 flex items-center justify-start">
-                                <img
-                                    src="https://firebasestorage.googleapis.com/v0/b/couple-85135.appspot.com/o/1d7fc2326c8698e8bf2206d32b5d941d.jpg?alt=media&token=5cefb461-ffc9-402c-a95d-95426445383d"
-                                    alt="First Date"
-                                />
-                                <p className="ml-2 text-xs font-italic text-justify">
-                                    Nestled along Vietnam scenic coastline, Vung Tau beckons with its tranquil charm
-                                    and inviting seascape. A getaway to this coastal gem promises moments of serenity
-                                    and culinary delight. Imagine strolling along the sun-kissed shores, waves gently
-                                    lapping at your feet as you indulge in crispy fried fish balls and sip on aromatic
-                                    coffee by the beach. Vung Tau is allure extends beyond its sandy beaches; it is a
-                                    haven for seafood enthusiasts. Savour the freshness of local delicacies like
-                                    succulent grilled squid and briny oysters, each dish a testament to the region is
-                                    rich maritime bounty. As evening falls, the sea breeze carries whispers of
-                                    relaxation, a perfect backdrop for recounting tales and forging cherished memories.
-                                    Vung Tau, where every moment is a feast for the senses and a celebration of coastal
-                                    splendour.
-                                </p>
-                            </div>
-                        </div>
-                    </TimelineContent>
-                </TimelineItem>
-                {/* 6 Months Anniversary */}
-                <TimelineItem className="animate__animated" ref={refSixMonths}>
-                    <TimelineOppositeContent className={cx('modernTimeLine-titleTimeLine')} color="text.secondary">
-                        Ngày 26 tháng 10 năm 2023
-                    </TimelineOppositeContent>
-                    <TimelineSeparator>
-                        <p>💗</p>
-                        <TimelineConnector />
-                    </TimelineSeparator>
-                    <TimelineContent>
-                        <div className={cx('modernTimeLine-content')}>
-                            <h1>6 Months Anniversary</h1>
-                            <p className="text-xs font-normal">(Go eat at a Korean restaurant)</p>
-                            <div className="mt-4 flex items-center justify-start">
-                                <img
-                                    src="https://firebasestorage.googleapis.com/v0/b/couple-85135.appspot.com/o/IMG_9574.jpg?alt=media&token=b10d7c1a-c46e-4f6c-a857-ca59b89f1a2e"
-                                    alt="First Date"
-                                />
-                                <p className="ml-2 text-xs font-italic text-justify">
-                                    Six months into our journey together, we celebrated with a memorable evening at a
-                                    charming Korean restaurant. The cozy ambiance and savory aromas welcomed us as we
-                                    savored crispy fried chicken with a delightful crunchy corn coating. Each bite was a
-                                    celebration of our growing bond, filled with laughter and shared stories. Later, we
-                                    ventured to a nearby cafe with a breathtaking view, where city lights shimmered like
-                                    stars against the night sky. Sipping on aromatic teas, we reminisced about our
-                                    favorite moments and dreams for the future. The beauty of the evening mirrored the
-                                    beauty of our relationship, each moment etched in our hearts as a testament to love
-                                    and companionship.
-                                </p>
-                            </div>
-                        </div>
-                    </TimelineContent>
-                </TimelineItem>
-                {/* One year of knowing each other */}
-                <TimelineItem className="animate__animated" ref={refOneYear}>
-                    <TimelineOppositeContent className={cx('modernTimeLine-titleTimeLine')} color="text.secondary">
-                        Ngày 26 tháng 04 năm 2024
-                    </TimelineOppositeContent>
-                    <TimelineSeparator>
-                        <p>💗</p>
-                        <TimelineConnector />
-                    </TimelineSeparator>
-                    <TimelineContent>
-                        <div className={cx('modernTimeLine-content')}>
-                            <h1>One year of knowing each other</h1>
-                            <p className="text-xs font-normal">(Go for a drink at a restaurant with a rooftop view)</p>
-                            <div className="mt-4 flex items-center justify-start">
-                                <img
-                                    src="https://firebasestorage.googleapis.com/v0/b/couple-85135.appspot.com/o/IMG_0489.jpg?alt=media&token=8d35f5c4-1474-4f35-9971-e32259e24bea"
-                                    alt="First Date"
-                                />
-                                <p className="ml-2 text-xs font-italic text-justify">
-                                    On our first anniversary together, we decided to celebrate with a delightful evening
-                                    starting at a rooftop café with stunning city views. As we sipped on refreshing
-                                    drinks under the twinkling evening sky, we reflected on our journey over the past
-                                    year—filled with laughter, challenges, and cherished moments. The city lights formed
-                                    a mesmerizing backdrop to our conversation, highlighting the beauty of the moment.
-                                    Following our drinks, we ventured to a cozy restaurant renowned for its grilled
-                                    beef, a place we discovered through a TikTok video. The aroma of sizzling meat
-                                    filled the air as we settled into a cozy corner, exchanging glances filled with
-                                    affection and reminiscing about our favorite memories together. The tender beef,
-                                    perfectly seasoned and grilled to perfection, served as a delicious symbol of our
-                                    enduring love and shared adventures. As the evening unfolded, we toasted to many
-                                    more years of happiness and exploration, grateful for the serendipitous moments that
-                                    brought us closer and excited for the future yet to unfold.
-                                </p>
-                            </div>
-                        </div>
-                    </TimelineContent>
-                </TimelineItem>
+                {DataModernTimeline.map((item: any) => {
+                    return (
+                        <ModernTimelineEvent
+                            key={item.id}
+                            date={item.date}
+                            title={item.title}
+                            subtitle={item.subtitle}
+                            description={item.description}
+                            imgSrc={item.imgSrc}
+                            imgAlt={item.imgAlt}
+                            position={item.position}
+                        />
+                    );
+                })}
             </Timeline>
         </div>
     );
-}
+};
+
+export default OppositeContentTimeline;
diff --git a/src/components/ModernTimeline/ModernTimelineEvent.tsx b/src/components/ModernTimeline/ModernTimelineEvent.tsx
new file mode 100644
index 0000000..476db02
--- /dev/null
+++ b/src/components/ModernTimeline/ModernTimelineEvent.tsx
@@ -0,0 +1,90 @@
+import React, { useRef, useEffect, useState } from 'react';
+import TimelineItem from '@mui/lab/TimelineItem';
+import TimelineSeparator from '@mui/lab/TimelineSeparator';
+import TimelineConnector from '@mui/lab/TimelineConnector';
+import TimelineContent from '@mui/lab/TimelineContent';
+import TimelineOppositeContent from '@mui/lab/TimelineOppositeContent';
+import classNames from 'classnames/bind';
+import styles from './ModernTimeline.module.scss';
+import useIsInViewport from '@/hooks/useIsInViewport';
+import ModernTimelineModal from '../Modal/ModernTimeline';
+const cx = classNames.bind(styles);
+
+interface ModernTimelineEventProps {
+    date: string;
+    title: string;
+    description: string;
+    imgSrc: string;
+    imgAlt: string;
+    subtitle: string;
+    position: 'left' | 'right';
+}
+
+const ModernTimelineEvent: React.FC<ModernTimelineEventProps> = ({
+    date,
+    title,
+    description,
+    imgSrc,
+    imgAlt,
+    position,
+    subtitle,
+}) => {
+    const ref = useRef<HTMLDivElement | null>(null);
+    const isInViewport = useIsInViewport(ref);
+    const [isHoverContent, setHoverContent] = useState<boolean>(false);
+    const [isOpenModal, setOpenModal] = useState<boolean>(false);
+    const [dataModalSelected, setDataModalSelected] = useState<any>({});
+    const handleOnMouseEnter = () => {
+        setHoverContent(true);
+    };
+
+    const handleOnMouseLeave = () => {
+        setHoverContent(false);
+    };
+    useEffect(() => {
+        if (isInViewport) {
+            ref.current?.classList.add(position === 'left' ? 'animate__backInLeft' : 'animate__backInRight');
+        }
+    }, [isInViewport, position]);
+
+    return (
+        <>
+            <TimelineItem
+                onClick={() => {
+                    setOpenModal(true);
+                    setDataModalSelected({ date, title, description, imgSrc, imgAlt, position, subtitle });
+                }}
+                className="animate__animated hover:cursor-pointer"
+                ref={ref}
+            >
+                <TimelineOppositeContent
+                    className={cx('modernTimeLine-titleTimeLine', isHoverContent ? 'modernTimeLine-titleHover' : '')}
+                >
+                    {date}
+                </TimelineOppositeContent>
+                <TimelineSeparator>
+                    <p>💗</p>
+                    <TimelineConnector />
+                </TimelineSeparator>
+                <TimelineContent onMouseEnter={handleOnMouseEnter} onMouseLeave={handleOnMouseLeave}>
+                    <div className={cx('modernTimeLine-content', isHoverContent ? 'modernTimeLine-contentHover' : '')}>
+                        <h1>{title}</h1>
+                        <p className="text-xs font-normal">{subtitle}</p>
+                        <div className="mt-4 flex items-center justify-start">
+                            <img src={imgSrc} alt={imgAlt} />
+                            <p className="ml-2 text-xs font-italic text-justify">{description}</p>
+                        </div>
+                    </div>
+                </TimelineContent>
+            </TimelineItem>
+            {/* OPEN MODAL */}
+            <ModernTimelineModal
+                isOpen={isOpenModal}
+                onClose={(e: boolean) => setOpenModal(e)}
+                data={dataModalSelected}
+            />
+        </>
+    );
+};
+
+export default ModernTimelineEvent;
diff --git a/src/components/ModernTimeline/TextComponent.tsx b/src/components/ModernTimeline/TextComponent.tsx
deleted file mode 100644
index ef61a20..0000000
--- a/src/components/ModernTimeline/TextComponent.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import React from 'react';
-
-export default function TextComponent() {
-    return (
-        <>
-            Since the 1920s, Hitler had seen Russia, with its immense natural resources, as the principal target for
-            conquest and expansion. It would provide, he believed, the necessary ‘Lebensraum’, or living space, for the
-            German people. And by conquering Russia, Hitler would also destroy the “Jewish pestilential creed of
-            Bolshevism”. His non-aggression pact with Stalin in August 1939 he regarded as a mere temporary expedient.
-            <br />
-            Barely a month after the fall of France, and while the Battle of Britain was being fought, Hitler started
-            planning for the Blitzkrieg campaign against Russia, which began on 22 June 1941. Despite repeated warnings,
-            Stalin was taken by surprise, and for the first few months the Germans achieved spectacular victories,
-            capturing huge swathes of land and hundreds of thousands of prisoners. But they failed to take Moscow or
-            Leningrad before winter set in.
-            <br />
-            On 5/6 December, the Red Army launched a counter-offensive which removed the immediate threat to the Soviet
-            capital. It also brought the German high command to the brink of a catastrophic military crisis. Hitler
-            stepped in and took personal command. His intervention was decisive and he later boasted, “That we overcame
-            this winter and are today in a position again to proceed victoriously… is solely attributable to the bravery
-            of the soldiers at the front and my firm will to hold out…”
-        </>
-    );
-}
diff --git a/src/libs/data.ts b/src/libs/data.ts
index 6900efd..d472a35 100644
--- a/src/libs/data.ts
+++ b/src/libs/data.ts
@@ -1,4 +1,3 @@
-import TextComponent from '@/components/ModernTimeline/TextComponent';
 const months = [
     { vi: 'thg 1', en: 'January' },
     { vi: 'thg 2', en: 'February' },